<!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. JS中变量名和函数名重名

    今天骚凯问了一道变量名冲突的题目,感觉很有意思,顺便也复习一下预解析的一些知识,有不对的地方忘前辈大神指正,题目是这样的: var a=100; function a(){ console.log(a ...

  2. Python 过算符和数据类型

    一.算术运算符 二.逻辑运算符

  3. Androidstudio安装AVD出现no system images installed for this target解决方案

    解决方案:

  4. Android 手机怎么录屏制成gif图片

    参考:http://www.cnblogs.com/dasusu/p/4903511.html 上面的博主说的很详细了,但作为学习记录我就重新写一遍帮助自己加深记忆 一.准备条件 1.你搭建了Andr ...

  5. OC中的@property详解

    简介: @property 生成了变量的get set 方法,同时指定了变量名称. 例如@property (nonatomic,strong) NSString *name;表示生成了_name私有 ...

  6. Opencv 完美配置攻略(Win8.1 + Opencv 2.4.8 + VS 2013)

  7. deepin 15.3添加PPA源 安装php5.6

    想要在deepin 15.3上安装PHP5.6,我们需要手动添加源. 在https://launchpad.net/+search?field.text=php上可以通过搜索找到你想要的软件源, PP ...

  8. BZOJ 1078: [SCOI2008]斜堆

    1078: [SCOI2008]斜堆 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 770  Solved: 422[Submit][Status][ ...

  9. Win7上安装Linux双系统

    今天帮同学在Win7上安装Linux,感觉一篇教程很不错,mark一下 原地址:Win7下U盘安装Ubuntu14.04双系统步骤详解 一.前期准备 1.大于2G的U盘一个(我的系统盘制作完成后大约占 ...

  10. web前端基础知识-（二）CSS基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...