<!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. C++的vector对象

    C++的vector使用 标签(空格分隔): C++ 标准库类型vector表示对象的集合,其中所有对象的类型都相同.集合中的每个对象都有一个与之对应的索引,索引用于访问对象,因为vector容纳着其 ...

  2. Objective C中的ARC的修饰符的使用---- 学习笔记九

    #import <Foundation/Foundation.h> @interface Test : NSObject /** * 默认的就是__strong,这里只是做示范,实际使用时 ...

  3. jmeter（七）定时器

    知识来源有点复杂,其他测试工作者的博客,百度百科,搜集的电子文档,个人理解等等,限于水平和理解能力,可能有些内容有错误的地方... jmeter提供了很多元件,帮助我们更好的完成各种场景的性能测试,其 ...

  4. SQLMAP参数介绍

    转自:http://zhan.renren.com/bugpower?gid=3602888498044629629&checked=true SQLMAP参数介绍 sqlmap的使用方式:p ...

  5. three.js添加文字

    添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...

  6. 快速部署tomcat项目的Shell脚本

    为了做集群测试,在每台机器上装了3个tomcat,每次发布项目的时候都要反复敲一些命令,重启tomcat之前先检查tomcat进程有没有停掉,没有还要手动kill该进程. 发布次数多了,操作就比较繁琐 ...

  7. LeetCode:Subsets I II

    求集合的所有子集问题 LeetCode:Subsets Given a set of distinct integers, S, return all possible subsets. Note: ...

  8. ubuntu12.04 安装CS:APP Y86模拟器

    下的第一UBUNTU12.04下Y86模拟器的安装:(參考http://archive.cnblogs.com/a/1865627/ 作适当改动) 1.安装bison和flex词法分析工具 sudo ...

  9. linq distinct 不够用了！

    问题引出:在实际中遇到一个问题,要进行集合去重,集合内存储的是引用类型,需要根据id进行去重.这个时候linq 的distinct 就不够用了,对于引用类型,它直接比较地址.测试数据如下: class ...

  10. 【swift学习笔记】一.页面转跳的条件判断和传值

    在转跳页面之前我们可能会判断一下是否有输入正确的数据,如下图所示,如果没有数据输入则弹出提示,不进行转跳. 一:页面转跳 1.第一个页面的上放上一个Label一个textfield和一个按钮 2.在第 ...