欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>