AngularJs使用ng-repeat实现数据循环展示的效果(代码教程)
程序员文章站
2022-07-23 18:14:52
一般情况下,后端给前端传输数据,前端都是用foreach来循环输出,现在使用AngularJs也能实现类似的功能,方法如下:
01 ...
一般情况下,后端给前端传输数据,前端都是用foreach来循环输出,现在使用AngularJs也能实现类似的功能,方法如下:
01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <meta charset="UTF-8"> 05 <title>Document</title> 06 <meta name="Keywords" content=""> 07 <meta name="Description" content=""> 08 <style type="text/css"> 09 .ng-cloak{display:none;} 10 td{height:30px;line-height:30px;padding:0px 10px;} 11 </style> 12 </head> 13 <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak"> 14 <table cellpadding="0" cellspacing="0" border="1"> 15 <thead> 16 <tr> 17 <td>网站名称</td> 18 <td>网址</td> 19 </tr> 20 </thead> 21 <tbody> 22 <tr ng-repeat="(k, v) in data"> 23 <td>{{v.name}}</td> 24 <td>{{v.url}}</td> 25 </tr> 26 <!--{{$first}}第一条 {{$last}}最后一条 {{$middle}}中间部分--> 27 <tr ng-repeat="(k, v) in data" style="{{$first ? 'color:red' : ''}}"> 28 <td>{{v.name}}</td> 29 <td>{{v.url}}</td> 30 </tr> 31 </tbody> 32 </table> 33 <!--如果是单纯的循环一个索引数组,那么数组内容不能有重复,否则AngularJs会报错,解决方法就是在循环指令内加上 track by $index--> 34 <ul> 35 <li ng-repeat="(k, v) in arry track by $index">{{v}}</li> 36 </ul> 37 </body> 38 </html> 39 <script type="text/javascript" src="../js/angular.min.js"></script> 40 <script type="text/javascript"> 41 var m = angular.module('app', []); 42 m.controller('ctrl', ['$scope', function($scope){ 43 $scope.data = [ 44 {'name':'K`illCode个人技术博客', 'url':'https://blog.csdn.net/dome_'}, 45 {'name':'K`illCode新浪博客', 'url':'www.XXX.com'}, 46 {'name':'太原雅辉装修网', 'url':'https://www.0351zhuangxiu.com'}, 47 ]; 48 $scope.arry = ['SEO', 'WEB前端开发', 'java程序开发', 'java程序开发']; 49 }]); 50 </script>
上一篇: python爬虫原理讲解
下一篇: java 发架包