如何用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 ...
随机推荐
- SQLMAP参数介绍
转自:http://zhan.renren.com/bugpower?gid=3602888498044629629&checked=true SQLMAP参数介绍 sqlmap的使用方式:p ...
- 简单所以不要忽视,关于\r\n和\n程序员应了解的实际应用
众所周知,\r叫回车符,\n叫换行符. 由于历史原因,windows环境下的换行符是\r\n;(文章最后会稍微解释这个历史原因) linux和html等开源或公开标准中的换行符是\n. 记录这篇笔记的 ...
- 1125MySQL Sending data导致查询很慢的问题详细分析
-- 问题1 tablename使用主键索引反而比idx_ref_id慢的原因EXPLAIN SELECT SQL_NO_CACHE COUNT(id) FROM dbname.tbname FORC ...
- 顺序表java实现
public class SeqList { Object[] data; int maxSize; int length; public SeqList(int maxSize) { this.ma ...
- poj1986 LCA
Distance Queries Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 11759 Accepted: 4157 ...
- Internet Download Manager 6.27.1 中文特别版(IDM)
软件介绍: 软件名称:Internet Download Manager(IDM) 软件大小:5.09M软件语言:简体中文 软件官网:http://www.internetdownloadmanage ...
- <<< struts 的一系列介绍
struts有什么用? 以前使用servlet开发应用系统的人深深感受到在java代码中嵌入大量html代码是一件非常痛苦的事,于是sun推出了JSP,解决了java代码中嵌入html代码的问题.但是 ...
- 理解DOM
http://www.cnblogs.com/chaogex/p/3959723.html 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言 ...
- HTTP超文本传输协议-HTTP/1.1中文版
摘要 超文本传输协议(HTTP)是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途外 ...
- Dell服务器安装OpenManage(OMSA)
公司上架了一批戴尔服务器,公司要求对这些服务器的硬件做一系列的监控,如CPU的温度,内存,风扇的状态,转速,磁盘等硬件的监控. 在对服务器的硬件监控上,目前业界主要基于如下两种: 1.服务器自带的工具 ...