AngularJS中的ng-repeat、ng-repeat-start和ng-repeat-end的用法区别详解
不碰前端好多年，早已成为落伍者；前端技术发展迅速，忙于其他，一直无缘接触AngularJS、VueJS等前端框架。今初尝禁果，额...是第一次亲密接触AngularJS，被其ng-repeat、ng-repeat-start和ng-repeat-end所迷惑，看不错何区别。百度一下，依然没看明白，既然看不明白就自己试验吧。 代码如下：购物车我的订
·
不碰前端好多年，早已成为落伍者；前端技术发展迅速，忙于其他，一直无缘接触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-start,ng-repeat-end.
③如果一个div上被设置了ng-repeat-start,那么此div之内（即<div>与</div>）之间是不能放ng-repeart-end的，否则无法运行。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)