57

关于如何在 ngRepeat 指令中实现项目删除有很多问题，正如我发现的那样，它归结为使用ngClick并触发一些传递它项目的$index的删除函数。

但是，我在任何地方都找不到我有多个 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>

为此，我需要创建$scope.removePhone和$scope.removeEmail将使用ngClick on Remove anchor调用。但我正在寻找更通用的解决方案。特别是因为我有很多页面有很多 ngRepeats。

我正在考虑编写一个指令，该指令将放置在Remove anchor上，并会执行以下操作：

  1. 在父元素中查找ngRepeat 。
  2. 阅读它正在迭代的内容（第一种情况是'user.emails'，第二种情况是'user.phones'）
  3. 从那个模型中移除$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>

我正在寻找可能实现的目标吗？最好的方法是什么？

当前的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>
4

5 回答 5

79

您可以创建一个通用的删除方法，该方法将接收数组和要删除的项目。

<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);
}
于 2013-08-15T11:45:59.963 回答
72

没有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>
于 2014-10-10T18:28:27.273 回答
19 
<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>
于 2014-10-24T16:39:38.880 回答
3

一个非常简单方便的跨浏览器工作方法是使用库 lodash 中的“删除”实用程序方法。

<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

于 2015-05-26T17:19:29.023 回答
1

如果您在对象而不是数组上使用了 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', .... }  };
于 2014-10-16T17:47:24.060 回答