<!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也是从数据中获得。
页面显示效果如下: