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

最新推荐文章于 2021-01-11 22:07:40 发布

weixin_30316097

最新推荐文章于 2021-01-11 22:07:40 发布

阅读量109

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/dfghjkl/p/5531090.html

版权

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

页面显示效果如下：

转载于:https://www.cnblogs.com/dfghjkl/p/5531090.html

weixin_30316097

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用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="...
复制链接

扫一扫