AngularJs使用ng-repeat实现数据循环展示的效果（代码教程）
程序员文章站
2022-04-05 08:45:21
一般情况下，后端给前端传输数据，前端都是用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>