如何用angularjs给从后台传来数据添加链接

 <!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给从后台传来数据添加链接

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

angularJs之http后台访问数据
AngularJS XMLHttpRequest $http 是AngularJS中的一个核心服务,用于读取远程服务器的数据. 读取JSON 文件以下是存储在web服务器上的JSON 文件: h ...
通过AngularJS实现前端与后台的数据对接（二）——服务（service，&dollar;http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
angularjs向后台传递数据，与后端进行交互
angularjs之数据交互 function loadLeftFirstNodes (){ $http.get(sourceUrl,{ params:{ mpId: mpId, visits: ce ...
通过AngularJS实现前端与后台的数据对接（一）——预备工作篇
最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...
jQuery AJAX 方法 success()后台传来的4种数据
JAVA中的四种JSON解析方式详解 jQuery AJAX 方法 success()后台传来的4种数据 1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper ...
Echarts怎么用后台传来的json数据
Echarts怎么用后台传来的json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
bootstrap-table前端修改后台传来的数据重新进行渲染
使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位回到顶部调整数据代码 $("#"+tableId).bootstrap ...
通过form表单上传文件获取后台传来的数据
小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...
jQuery ajax方法success（）中后台传来的四种数据类型
1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cac ...

随机推荐

微信获取坐标的JS
wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02' succes ...
ubuntu使用记录
常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir ...
在smarty模板中嵌入php代码
我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...
Binders 与 Window Tokens(窗体令牌)
原文地址:http://www.androiddesignpatterns.com/2013/07/binders-window-tokens.html 安卓的一项核心设计思想是希望能提供一个不须要依 ...
okHttp基础用法
获取okHttp..jar.包 1.联网获取jar包 2.本地添加 okHttp的使用 get请求 1.创建okHttpClient对象new OkHttpClient(); 2.创建一个请求对象Re ...
Linux中断程序命令
在运行 python 脚本的时候想要中断程序,发现如下情况: ctrl+c 居然无法中断程序! 这时候尝试 ctrl+d 还是毫无效果,最后尝试 ctrl+\: 查看该程序是否还在运行 ps aux ...
自古枪兵幸运E
好梗求方程的解.n个可以奇数可以偶数,m个必须是偶数两种方法: 都是O(nlogn)logn是LUCAS定理法一: 有奇数有偶数,如果都是偶数,那么可以直接除以二然后组合数学所以枚举有几个奇数 ...
pacman 命令
安装 pacman -S 删除 pacman -R 移除已安装不需要软件包 pacman -Rs 删除一个包,所有依赖 pacman -Rsc 升级包 pacman -Syu 查询包数据库 ...
kafka集群监控之kafka-manager部署(kafka-manager的进程为：ProdServerStart)
kafka集群监控之kafka-manager部署(ProdServerStart) 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 雅虎官网GitHub项目:https://git ...
自然语言交流系统 phxnet团队创新实训项目博客（十）
关于本项目中使用到的庖丁分词的总结: Paoding 详细介绍庖丁中文分词库是一个使用Java开发的,可结合到Lucene应用中的,为互联网.企业内部网使用的中文搜索引擎分词组件.Paodi ...