AngularJS中的ng-repeat、ng-repeat-start和ng-repeat-end的用法区别详解

不碰前端好多年，早已成为落伍者；前端技术发展迅速，忙于其他，一直无缘接触AngularJS、VueJS等前端框架。今初尝禁果，额...是第一次亲密接触AngularJS，被其ng-repeat、ng-repeat-start和ng-repeat-end所迷惑，看不错何区别。百度一下，依然没看明白，既然看不明白就自己试验吧。代码如下：购物车我的订

金钱大法师

3844人浏览 · 2017-07-20 15:43:46

金钱大法师 · 2017-07-20 15:43:46 发布

代码如下：

<!DOCTYPE html>
<html ng-app="cartApp">
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<script src="../js/angular.min.js"></script>
	</head>
	<body ng-controller="cartController">
		<h1>我的订单：</h1>
		<h1>用ng-repeat-start和ng-repeat-end精确控制循环部分</h1>
		<div>
			<span ng-repeat-start="item in items">{{item.title}}</span>
			<input ng-model="item.quantity"/>
			<span>{{item.price | currency}}</span>
			<span>{{item.price * item.quantity | currency}}</span>
			<button ng-repeat-end="" ng-click="remove($index)">移除</button>				
		</div>
		<h1>改进-用ng-repeat-start和ng-repeat-end精确控制循环部分</h1>
		<div>
			<span ng-repeat-start="item in items">{{item.title}}</span>
			<input ng-model="item.quantity"/>
			<span>{{item.price | currency}}</span>
			<span>{{item.price * item.quantity | currency}}</span>
			<button ng-click="remove($index)">移除</button>
			<br ng-repeat-end=""/>
		</div>
		<h1>不需要精确控制循环体的场景：直接用ng-repeat</h1>
		<div ng-repeat="item in items">
			<span>{{item.title}}</span>
			<input ng-model="item.quantity"/>
			<span>{{item.price | currency}}</span>
			<span>{{item.price * item.quantity | currency}}</span>
			<button ng-click="remove($index)">移除</button>
			<br/>
		</div>
		<script language="JavaScript">
			var app = angular.module("cartApp",[]);
			app.controller('cartController',function($scope)
			{
				$scope.items = [
				{title:'西瓜',quantity:8,price:3.95},
				{title:'桃子',quantity:5,price:2.95},
				{title:'李子',quantity:8,price:3.95}
				];
				$scope.remove = function(index)
				{
					$scope.items.splice(index,1);
				}
			});
		</script>
	</body>
</html>

结论：①当不用精确控制循环体的时候，可以直接使用ng-repeat;

②需要精确控制循环体的时候(重点是循环起止位置的时候)，可以使用ng-repeat-start,ng-repeat-end.

③如果一个div上被设置了ng-repeat-start,那么此div之内（即<div>与</div>）之间是不能放ng-repeart-end的，否则无法运行。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^