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

 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也是从数据中获得。

页面显示效果如下:

posted @ 2016-05-26 14:51  一人的代码  阅读(1398)  评论(0编辑  收藏  举报