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

来源：互联网发布：淘宝微博推广平台编辑：程序博客网时间：2024/05/17 12:23

不碰前端好多年，早已成为落伍者；前端技术发展迅速，忙于其他，一直无缘接触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 0