javascript - AngularJS ngRepeat 元素删除

Question

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

但是，我无法在任何地方找到我有多个 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 调用>移除 anchor 。但我正在寻找更通用的解决方案。特别是因为我有很多页面都有 ma​​ny ngRepeats 。

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

1. 在父元素中找到ngRepeat。
2. 阅读它正在迭代的内容(第一种情况是“user.emails”，第二种情况是“user.phones”)
3. 从 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>

我正在寻找可能实现的目标吗？实现此目标的首选方式是什么？

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

Answer 1

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

<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);
}