web-dev-qa-db-ja.com

AngularJS ng繰り返し要素の削除

NgRepeatディレクティブ内でアイテムの削除を実装する方法についてはかなりの質問があり、私が理解したように、ngClickを使用し、アイテムの$ index。

ただし、複数のngRepeatがある例はどこにも見つかりませんでした。

<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を作成して、ngClickonRemove anchorしかし、私はより一般的なソリューションを探しています。特に、many ngRepeatsのページがたくさんあるので。

私はRemove anchorに配置され、次のようなことをするディレクティブを書くことを考えていました：

  1. 親要素間でngRepeatを見つけます。
  2. 繰り返し処理を読んでください（最初の場合は「user.emails」、2番目の場合は「user.phones」）
  3. $ index要素を[〜＃〜] that [〜＃〜]モデルから削除します。

したがって、マークアップは次のようになります。

<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>

私が達成しようとしているものは可能ですか、これを行うための好ましい方法は何ですか？

現在のハッキーソリューション

現在、私はそれをどのように行っていますか。それはハックでandいですが、きれいな方法を見つけるまで仕事をやり遂げます。

  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>
javascriptangularjsangularjs-directiveangularjs-scope
56
user2742648

削除する配列とアイテムを受け取る汎用の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);
}
78
Mark Coleman

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>
71
Code Whisperer
<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>
19
Madhu Dhanasekaran

クロスブラウザで機能する非常にシンプルで便利な方法は、ライブラリ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 を参照してください

3
Igor Lino

配列ではなくオブジェクトで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', .... }  };
1
Tom Carchrae