<!DOCTYPE html>

 <html ng-app="myApp">

 <head>

 <meta charset="UTF-8">

  <title>angular</title>

 </head>

 <body ng-controller="myCtrl">

    <table>

     <tr ng-repeat="name in names">

      <td><a  href="http://{{name.url}}" target="_blank">{{name.name}}</a><div  style="display:none">{{name.url}}</div></td>

      <td ng-bind="name.age"></td>

      <td ng-bind="name.sex"></td>

     </tr>

    </table>

 </body>

 <script src="js/jquery-1.11.1.min.js"></script>

 <script src="js/angular.min.js"></script>

 <script>

  angular.module('myApp',[]).controller('myCtrl',function($scope){

   $scope.names=[{

     "name": "xiaohaong",

     "age": 12,

     "sex": "女",

     "url":"www.trs.com.cn"

 },

 {

     "name": "xiaoming",

     "age": 18,

     "sex": "男",

     "url":"www.trs.com.cn"

 },{

     "name": "xiaoqing",

     "age": 12,

     "sex": "女",

     "url":"www.trs.com.cn"

 },{

     "name": "xiaoqinag",

     "age": 19,

     "sex": "男",

     "url":"www.trs.com.cn"

 }];

  })

$scope.names后面为自己定义的一个数组，ng-repeat是将这个数组进行了遍历，遍历之后就会得到每个对象，然后利用json的属性/属性值，最终通过住属性来获得对应的属性值，而链接href也是从数据中获得。

页面显示效果如下：

如何用angularjs给从后台传来数据添加链接的更多相关文章

  1. angularJs之http后台访问数据

    AngularJS  XMLHttpRequest $http  是AngularJS中的一个核心服务,用于读取远程服务器的数据. 读取JSON 文件 以下是存储在web服务器上的JSON 文件: h ...

  2. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  3. angularjs向后台传递数据，与后端进行交互

    angularjs之数据交互 function loadLeftFirstNodes (){ $http.get(sourceUrl,{ params:{ mpId: mpId, visits: ce ...

  4. 通过AngularJS实现前端与后台的数据对接（一）——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  5. jQuery AJAX 方法 success()后台传来的4种数据

    JAVA中的四种JSON解析方式详解 jQuery AJAX 方法 success()后台传来的4种数据 1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper ...

  6. Echarts怎么用后台传来的json数据

    Echarts怎么用后台传来的json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  7. bootstrap-table前端修改后台传来的数据重新进行渲染

    使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位 回到顶部 调整数据代码 $("#"+tableId).bootstrap ...

  8. 通过form表单上传文件获取后台传来的数据

    小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...

  9. jQuery ajax方法success（）中后台传来的四种数据类型

    1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cac ...

随机推荐

  1. python高级之函数

    python高级之函数 本节内容 函数的介绍 函数的创建 函数参数及返回值 LEGB作用域 特殊函数 函数式编程 1.函数的介绍 为什么要有函数?因为在平时写代码时,如果没有函数的话,那么将会出现很多 ...

  2. 利用缓存实现APP端与服务器接口交互的Session控制

    与传统B/S模式的Web系统不同,移动端APP与服务器之间的接口交互一般是C/S模式,这种情况下如果涉及到用户登录的话,就不能像Web系统那样依赖于Web容器来管理Session了,因为APP每发一次 ...

  3. 种子填充算法描述及C++代码实现

    项目需要看了种子填充算法,改进了算法主要去除面积小的部分.种子填充算法分为两种,简单的和基于扫描线的方法,简单的算法如下描述(笔者针对的是二值图像): (1)从上到下,从左到有,依次扫描每个像素: ( ...

  4. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  5. 创建.emacs.d目录和.emacs文件

    1.双击bin下的addpm.exe 2.HKEY_CURRENT_USER->Software->GNU->Emacs 新建字符串值HOME,数值数据为emacs的安装路径 3.创 ...

  6. 【USACO 2.4 】Bessie Come Home

    题意:给出n条有权的双向边(10000),求到达Z最近的大写字母,及其距离. 题解:即求Z出发的最短路,用dijstra就可以了,注意边要开到20000以上. /* TASK: comehome LA ...

  7. debian/deepin 15.3安装jdk 1.7 （或jdk 7）,配置默认环境

    一.前言 Deepin 15.3是基于Debian开发的,安装jdk 1.7有所不同,默认是openjdk-8-jdk,而我们玩一些编译需要的是jdk 7. 所以本文给出安装JDK 7的教程. 二.安 ...

  8. MapReduce实现手机上网日志分析（排序）

    一.背景 1.1 流程 实现排序,分组拍上一篇通过Partitioner实现了. 实现接口,自动产生接口方法,写属性,产生getter和setter,序列化和反序列化属性,写比较方法,重写toStri ...

  9. 向shell脚本中传入参数

    写一个 程序名为    test.sh    可带参数为 start 和 stop 执行  test.sh start执行  start 内容的代码 执行 test.sh stop 执行 stop 内 ...

  10. python对缓存(memcached,redis)的操作

    1.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...