9、AngularJs使用ng-repeat实现数据循环展示的效果

阅读() @2019-03-17 16:05:12

一般情况下,后端给前端传输数据,前端都是用foreach来循环输出,现在使用AngularJs也能实现类似的功能,方法如下:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
			td{height:30px;line-height:30px;padding:0px 10px;}
		</style>
	</head>
	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
		<table cellpadding="0" cellspacing="0" border="1">
			<thead>
				<tr>
					<td>网站名称</td>
					<td>网址</td>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="(k, v) in data">
					<td>{{v.name}}</td>
					<td>{{v.url}}</td>
				</tr>
				<!--{{$first}}第一条  {{$last}}最后一条  {{$middle}}中间部分-->
				<tr ng-repeat="(k, v) in data" style="{{$first ? 'color:red' : ''}}">
					<td>{{v.name}}</td>
					<td>{{v.url}}</td>
				</tr>
			</tbody>
		</table>
		<!--如果是单纯的循环一个索引数组,那么数组内容不能有重复,否则AngularJs会报错,解决方法就是在循环指令内加上 track by $index-->
		<ul>
			<li ng-repeat="(k, v) in arry track by $index">{{v}}</li>
		</ul>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.data = [
			{'name':'赵一鸣个人技术博客', 'url':'http://www.zymseo.com'},
			{'name':'赵一鸣新浪博客', 'url':'http://blog.sina.com.cn/zhaoyimingtongxue'},
			{'name':'太原雅辉装修网', 'url':'http://www.0351zhuangxiu.com'},
		];
		$scope.arry = ['SEO', 'WEB前端开发', 'PHP程序开发', 'PHP程序开发'];
	}]);
</script>

(完)!

微信二维码