如何用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之http后台访问数据
AngularJS XMLHttpRequest $http 是AngularJS中的一个核心服务,用于读取远程服务器的数据. 读取JSON 文件 以下是存储在web服务器上的JSON 文件: h ...
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$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 ...
随机推荐
- 安装node-sass提示没有vendor目录的解决办法
在node-sass目录下面新建一个vendor的空目录,然后运行npm/cnpm rebuild node-sass --save-dev即可,如果安装失败,会生成一个目录名为类似这样win32-x ...
- 初识CDQ分治
[BZOJ 1176:单点修改,查询子矩阵和]: 1176: [Balkan2007]Mokia Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 200 ...
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- sqlserver 2008R2数据库迁移oracle
x项目需要,将以前的sqlserver数据库迁移的oracle数据库中,由于以前对oracle只是在DML语句的步骤,所以总结一下这次遇到的问题以及具体步骤 1,oracle新建数据库 新建Oracl ...
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 员工离职管理
当公司有几万人,上千家加盟网点,几个庞大的直属分公司后,系统账户的有效管理也是一个头疼的问题,把所有的帐户及时进行科学的管理,有人员离职时及时进行记录,防止离职人员的系统账户有各种安全漏洞. 谁什么时 ...
- Log4j的ConversionPattern参数的格式含义
Log4j建议只使用四个级别,优先级从高到低分别是ERROR.WARN.INFO.DEBUG#这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~!log4j.rootL ...
- p2p网贷平台设计简析
以我之前主持开发的一个商业产品:p2p网贷为例进行分析.整个的概况,可以参见:www.huixinp2p.com(目的只会技术交流) 界面可以直接参考前期博客:http://www.cnblogs.c ...
- Xcode调试技巧(断点和重构)
首先是最简单的普通断点有时候不知道是那个方法调用的崩溃的这个方法,传了个奇怪的值,打个断点就就可以在左侧工具栏里看到最近几个方法执行的循序,和那个方法调用的本方法,一般小问题在这里就可以解决啦~ 条件 ...
- C++ URLDecode和URLEncode实现——仅限gb2312，非utf8
转载--http://blog.163.com/zhangjie_0303/blog/static/9908270620148251658993/ #include <iostream> ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...