1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>angular</title> 6 </head> 7 <body ng-controller="myCtrl"> 8 <table> 9 <tr ng-repeat="name in names"> 10 <td><a href="http://{{name.url}}" target="_blank">{{name.name}}</a><div style="display:none">{{name.url}}</div></td> 11 <td ng-bind="name.age"></td> 12 <td ng-bind="name.sex"></td> 13 </tr> 14 </table> 15 </body> 16 <script src="js/jquery-1.11.1.min.js"></script> 17 <script src="js/angular.min.js"></script> 18 <script> 19 angular.module('myApp',[]).controller('myCtrl',function($scope){ 20 $scope.names=[{ 21 "name": "xiaohaong", 22 "age": 12, 23 "sex": "女", 24 "url":"www.trs.com.cn" 25 }, 26 { 27 "name": "xiaoming", 28 "age": 18, 29 "sex": "男", 30 "url":"www.trs.com.cn" 31 },{ 32 "name": "xiaoqing", 33 "age": 12, 34 "sex": "女", 35 "url":"www.trs.com.cn" 36 },{ 37 "name": "xiaoqinag", 38 "age": 19, 39 "sex": "男", 40 "url":"www.trs.com.cn" 41 }]; 42 43 })
$scope.names后面为自己定义的一个数组，ng-repeat是将这个数组进行了遍历，遍历之后就会得到每个对象，然后利用json的属性/属性值，最终通过住属性来获得对应的属性值，而链接href也是从数据中获得。
页面显示效果如下：