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

最新推荐文章于 2024-01-28 05:15:00 发布

金钱大法师

最新推荐文章于 2024-01-28 05:15:00 发布

阅读量3.8k

点赞数

分类专栏： Web前端文章标签： AngularJS ng-repeat ng-repeat-start ng-repeat-end 用法区别详解

本文链接：https://blog.csdn.net/DavyLee2008/article/details/75530692

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

代码如下：

<!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的，否则无法运行。

金钱大法师

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中的ng-repeat、ng-repeat-start和ng-repeat-end的用法区别详解

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

扫一扫