AngularJS ngRepeat元素删除
关于如何在ngRepeat指令中实现项目移除，还有很多问题，正如我想的那样，最终归结为使用ngClick并触发了一些传递它的项目$ index的 remove函数。
但是，我无法find任何地方我有多个ngRepeats的例子：
<div ng-controller="MyController"> <div ng-repeat="email in user.emails"> {{ email }} <a href>Remove</a> </div> <div ng-repeat="phone in user.phones"> {{ phone }} <a href>Remove</a> </div> </div> 为此，我需要创build$ scope.removePhone和$ scope.removeEmail这将被称为使用ngClick在删除锚点 。 但是我正在寻找更通用的解决scheme。 特别是因为我有许多ngRepeats页面。
我正在考虑编写一个指令，将其放在删除锚点，并会做这样的事情：
- 在父元素中查找ngRepeat 。
- 读取它正在迭代的内容（第一种情况为'user.emails'，第二种情况为'user.phones'）
- 从THAT模型中删除$ index元素。
所以标记看起来像这样：
<div ng-controller="MyController"> <div ng-repeat="email in user.emails"> {{ email }} <a href remove-directive="$index">Remove</a> </div> <div ng-repeat="phone in user.phones"> {{ phone }} <a href remove-directive="$index">Remove</a> </div> </div>
是我正在寻找可能实现和什么将是这样做的首选方法？
目前哈克解决scheme
这是我目前的做法。 这是hacky和丑陋的，但完成工作，直到我找出一个更漂亮的方式。
myAppModule.controller('MyController', function ($scope, $parse, $routeParams, User) { $scope.user = User.get({id: $routeParams.id}); $scope.remove = function ($index, $event) { // TODO: Find a way to make a directive that does this. This is ugly. And probably very wrong. var repeatExpr = $($event.currentTarget).closest('[ng-repeat]').attr('ng-repeat'); var modelPath = $parse(repeatExpr.split('in')[1].replace(/^\s+|\s+$/g, '')); $scope.$eval(modelPath).splice($index, 1); }; });
在DOM中：
<div ng-repeat="email in user.email" class="control-group"> <label class="control-label"> {{ "Email Address"|_trans }} </label> <div class="controls"> <input type="text" ng-model="email.address"> <span class="help-inline"><a href ng-click="remove($index, $event)">{{ "Delete"|_trans }}</a></span> </div> </div>
你可以创build一个通用的删除方法，将数组和项目删除。
<div ng-app="" ng-controller="MyController"> <div ng-repeat="email in emails">{{ email }} <a ng-click="remove(emails, $index)">Remove</a> </div> <div ng-repeat="phone in phones">{{ phone }} <a ng-click="remove(phones, $index)">Remove</a> </div> </div> $scope.remove = function(array, index){ array.splice(index, 1); }
没有JS
<div ng-repeat="option in options" ng-init=options=[1,2,3,4,5]> <button ng-click="options.splice($index,1)">Remove me</button> </div>
<div ng-app="" ng-controller="MyController"> <div ng-repeat="email in emails as datasource">{{ email }} <a ng-click="datasource.splice($index,1)">Remove</a> </div> <div ng-repeat="phone in phones as datasource">{{ phone }} <a ng-click="datasource.splice($index,1)">Remove</a> </div> </div>
如果您使用ng-repeat而不是数组，请执行以下操作。
<div ng-app="" ng-controller="MyController"> <div ng-repeat="email in emails">{{ email }} <a ng-click="remove(emails, email)">Remove</a> </div> <div ng-repeat="phone in phones">{{ phone }} <a ng-click="remove(phones, phone)">Remove</a> </div> </div> $scope.remove = function(objects, o){ delete object[o.id]; }
或者更简洁
<div ng-app="" ng-controller="MyController"> <div ng-repeat="email in emails">{{ email }} <a ng-click="delete emails[email.id]">Remove</a> </div> <div ng-repeat="phone in phones">{{ phone }} <a ng-click="delete phones[phone.id]">Remove</a> </div> </div>
假设对象看起来像这样
var emails = { '123' : { id : '123', .... } }; var phones = { '123' : { id : '123', .... } };
跨浏览器的一个非常简单和方便的方法是使用库lodash中的“remove”实用程序方法。
<div ng-repeat="phone in phones">{{ phone }} <a ng-click="removeItem(phones, phone)">Remove</a> </div>
在你的控制器中，你声明
//inject lodash dependency //declare method in scope $scope.removeItem = function(list, item){ lodash.remove(list,function(someItem) { return item === someItem}); }
如果你喜欢，你当然可以使用索引。 请参阅https://lodash.com/docs#remove
