- 首页
- 前端开发
- AngularJS ngRepeat 元素移除
AngularJS ngRepeat 元素移除
[英] AngularJS ngRepeat element removal
本文介绍了AngularJS ngRepeat 元素移除的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于如何在 ngRepeat 指令中实现项目删除有很多问题，正如我所发现的，归结为使用 ngClick 并触发一些删除函数传递它的项目的 $索引.
但是，我在任何地方都找不到我有多个 ngRepeats 的示例:
<div ng-repeat="user.emails 中的电子邮件">{{ email }} <a href>Remove</a>
<div ng-repeat="user.phones 中的电话">{{ 电话 }} 删除
为此，我需要创建 $scope.removePhone 和 $scope.removeEmail，它们将在 ngClick 调用>删除锚.但我正在寻找更通用的解决方案.特别是因为我有很多页面带有 many ngRepeats .
我正在考虑编写一个指令，该指令将放在 Remove anchor 上，并且会执行以下操作:
- 在父元素中查找 ngRepeat.
- 阅读它迭代的内容(第一种情况是user.emails"，第二种情况是user.phones")
- 从 THAT 模型中删除 $index 元素.
所以标记看起来像这样:
<div ng-repeat="user.emails 中的电子邮件">{{ email }} <a href remove-directive="$index">Remove</a>
<div ng-repeat="user.phones 中的电话">{{ phone }} <a href remove-directive="$index">Remove</a>
我正在寻找可能实现的目标吗?实现此目标的首选方法是什么?
当前的hacky解决方案
这是我目前的做法.它既笨拙又丑陋，但可以完成工作，直到我找到更漂亮的方法.
myAppModule.controller('MyController', function ($scope, $parse, $routeParams, User) {$scope.user = User.get({id: $routeParams.id});$scope.remove = function ($index, $event) {//TODO: 找到一种方法来制作执行此操作的指令.这是丑陋的.而且可能非常错误.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 中:
<label class="control-label">{{ "电子邮件地址"|_trans }}<div class="控件"><input type="text" ng-model="email.address"><span class="help-inline"><a href ng-click="remove($index, $event)">{{ "Delete"|_trans }}</a></span>
解决方案
您可以创建一个通用的 remove 方法来接收数组和要删除的项目.
<div ng-repeat="email in emails">{{ email }} <a ng-click="remove(emails, $index)">Remove</a>
<div ng-repeat="phone in phone">{{phone }} <a ng-click="remove(phones, $index)">Remove</a>
$scope.remove = 函数(数组，索引){array.splice(index, 1);}
There are quite a few questions on how to implement item removal inside ngRepeat directive, and as I figured out, it comes down to using ngClick and triggering some remove function passing it item's $index.
However, I couldn't find anywhere an example where I have multiple 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>
For this, I would need to create $scope.removePhone and $scope.removeEmail which would be called using ngClick on Remove anchor. But I'm looking for a more generic solution. Especially since I have many pages with many ngRepeats .
I was thinking about writing a directive which would be placed on Remove anchor and would do something like this:
- Find ngRepeat among parent elements.
- Read what it's iterating over ('user.emails' in first case, 'user.phones' in second)
- Remove $index element from THAT model.
So the markup would look something like this:
<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>
Is what I'm looking for possible to achieve and what would be the preferred way to do this?
Current hacky solution
Here is how I do it currently. It's hacky and ugly but gets the job done until I figure out a prettier way.
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);
};
});
And in 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>
解决方案
You could create a generic remove method that would take in the array and the item to remove.
<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);
}
这篇关于AngularJS ngRepeat 元素移除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
