频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
AngularJs使用ng-repeat实现数据循环展示的效果(代码教程)
2018-02-13 14:16:49      个评论    来源:KHOST的博客  
收藏   我要投稿

一般情况下,后端给前端传输数据,前端都是用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>

点击复制链接 与好友分享!回本站首页
上一篇:HTML系列教程之文字设置
下一篇:CSS定位、CSS的position属性实例讲解
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站