AngularJS ngRepeat元素移除 [英] AngularJS ngRepeat element removal

问题描述

有关于如何实现项目拆除ngRepeat指令里面有不少问题，因为我想通了，把它归结为使用的 ngClick 并触发一些remove函数传递给它的项目的 $指数

不过，我找不到任何地方一个例子，我有多个ngRepeats：

 ＆LT; D​​IV NG控制器=myController的＆GT;
    ＆LT; D​​IV NG重复=电子邮件在user.emails＆GT;
        {{EMAIL}}＆LT; A HREF＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV NG重复=手机user.phones＆GT;
        {{电话}}＆LT; A HREF＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

对于这一点，我需要创建的 $ scope.removePhone 和 $ scope.removeEmail 这将使用被称为 ngClick 在删除锚的。但是我正在寻找一个更通用的解决方案。特别是因为我有很多页的许多ngRepeats

我在想该写会被放置在一个指令删除锚并会做这样的事情：

1. 找到的 ngRepeat父元素中


2. 阅读什么它遍历（'user.emails在第一种情况下，第二'user.phones'）


3. 删除 $指数从该模型元素。

所以标记看起来是这样的：

 ＆LT; D​​IV NG控制器=myController的＆GT;
    ＆LT; D​​IV NG重复=电子邮件在user.emails＆GT;
        {{EMAIL}}＆LT; A HREF删除-指令=$指数＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV NG重复=手机user.phones＆GT;
        {{电话}}＆LT; A HREF删除-指令=$指数＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

就是我在寻找可能实现，什么是做这个的preferred方式？

当前哈克解决方案

下面是我如何做到这一点现在。这是哈克和丑陋，但直到我想出一个prettier方式能够完成任务。

  myAppModule.controller（'myController的'，函数（$范围，$解析，$ routeParams，用户）{
    $ scope.user = User.get（{ID：$ routeParams.id}）;    $ scope.remove =功能（$指数，$事件）{
      // TODO：找到一种方法，使一个指令，做到这一点。这是丑陋的。而且很可能非常错误的。
      VAR repeatExpr = $（$ event.currentTarget）.closest（'[NG重复]'）ATTR（'NG重复'）。
      VAR modelPath = $解析（repeatExpr.split（IN）[1] .replace（/ ^ \\ S + | \\ s + $ /克，''））;      。$ $范围的eval（modelPath）.splice（$指数，1）;
    };
  }）;
 

和DOM中：

 ＆LT; D​​IV NG重复=电子邮件在user.email级=控制组＆GT;
  ＆LT;标签类=控制标签＆GT;
    {{电子邮件地址| _trans}}
  ＆LT; /标签＆gt;  ＆LT; D​​IV CLASS =控制＆GT;
    ＆LT;输入类型=文本NG模型=email.address＆GT;    ＆LT;跨度类=求助在线＆GT;＆LT; A HREF NG点击=删除（$指数，$事件）＆GT; {{删除| _trans}}＆LT; / A＆GT;＆LT; / SPAN＆GT ;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

您可以创建一个能够把阵列和删除项目中的通用remove方法。

 ＆LT; D​​IV NG-应用=NG控制器=myController的＆GT;
    ＆LT; D​​IV NG重复=邮件在电子邮件中＆GT; {{EMAIL}}＆LT;一个NG点击=删除（电子邮件，$指数）＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV NG重复=手机中的手机＆GT; {{电话}}＆LT;一个NG点击=删除（手机，$指数）＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;$ scope.remove =功能（数组索引）{
    方法Array.splice（指数，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:

1. Find ngRepeat among parent elements.
2. Read what it's iterating over ('user.emails' in first case, 'user.phones' in second)
3. 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屋！