html - ng-click を使用して配列からアイテムまたはオブジェクトを削除するにはどうすればよいですか?

Question

ボタンがクリックされたときにアイテムを削除できるようにする関数を作成しようとしていますが、関数と混同していると思います-使用し$digestますか?

HTML & app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

score 564 · Accepted Answer

アイテムを削除するには、配列から削除する必要があり、bdayアイテムをマークアップの削除関数に渡すことができます。次に、コントローラーでアイテムのインデックスを検索し、配列から削除します

<a class="btn" ng-click="remove(item)">Delete</a>

次にコントローラーで：

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

bdaysAngular は配列への変更を自動的に検出し、更新を行います。ng-repeat

デモ: http://plnkr.co/edit/ZdShIA?p=preview

$resourceEDIT：サーバーでライブ更新を行うと、サーバーを更新すると同時にアレイの更新を管理するために作成したサービスが使用される場合

score 54 · Accepted Answer

これは正しい答えです:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

@charlietflの回答で。パラメータとして渡すので間違っていると思います$indexが、代わりにコントローラでウィッシュを使用します。私が間違っている場合は修正してください:)

score 27 · Accepted Answer

あなたがng-repeatの中にいる場合

ワンライナーオプションを使用できます

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index内部の配列の現在のインデックスを表示するために angular によって使用されますng-repeat

score 24 · Accepted Answer

基本的なケースでは使用$indexは完全にうまく機能し、@ charlietflの答えは素晴らしいです。しかし、時には、十分で$indexはありません。

2 つの異なる ng-repeat で提示している単一の配列があるとします。これらの ng-repeat の 1 つは、真のプロパティを持つオブジェクトに対してフィルター処理され、もう 1 つは偽のプロパティに対してフィルター処理されます。1 つの元の配列から派生した 2 つの異なるフィルター処理された配列が提示されています。(または、視覚化するのに役立つ場合: おそらく、単一の人の配列があり、その配列の女性用に 1 つの ng-repeat が必要で、同じ配列の男性用に別の ng-repeat が必要です。) あなたの目標: から確実に削除しますフィルタリングされた配列のメンバーからの情報を使用して、元の配列。

これらのフィルタリングされた配列のそれぞれで、 $index は元の配列内のアイテムのインデックスにはなりません。フィルタリングされたサブ配列のインデックスになります。そのため、元の配列で人のインデックスを知ることはできません。またはサブ配列peopleからの $index しかわかりません。それを使用して削除しようとすると、必要な場所以外の場所からアイテムが消えます。何をすべきか？womenmen

幸運にも、データモデルに各オブジェクトの一意の識別子が含まれている場合は、$index の代わりにそれを使用してsplice、メイン配列からオブジェクトとそれを見つけます。(以下の私の例を使用してください。ただし、その一意の識別子を使用します。) しかし、運が悪かった場合はどうなりますか?

Angular は、実際には ng 反復配列 (メインの元の配列) 内の各項目を、と呼ばれる一意のプロパティで拡張します$$hashKey。元の配列で、$$hashKey削除したい項目の一致を検索し、その方法でそれを取り除くことができます。

これ$$hashKeyは実装の詳細であり、公開されている ng-repeat の API には含まれていないことに注意してください。そのプロパティのサポートはいつでも削除できます。しかし、おそらくそうではありません。:-)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object's hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

次のように呼び出します。

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDIT：モデル固有のプロパティ名の代わりにキーを押すこのような関数を使用する$$hashKeyと、この関数をさまざまなモデルやコンテキストで再利用できるという大きな利点があります。配列参照とアイテム参照を提供すると、うまくいくはずです。

score 10 · Accepted Answer

私は通常、次のようなスタイルで書きます。

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

$scope と [yourArray] の間にドット (.) を使用する必要があります。

score 9 · Accepted Answer

受け入れられた回答に基づいて構築すると、これはで機能しngRepeat、filter期待をより適切に処理します。

コントローラ：

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

意見：

ng-click="vm.remove(item,$scope.bdays)"

score 4 · Accepted Answer

コントローラーなしの実装。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
  var app = angular.module("myShoppingList", []); 
</script>

<div ng-app="myShoppingList"  ng-init="products = ['Milk','Bread','Cheese']">
  <ul>
    <li ng-repeat="x in products track by $index">{{x}}
      <span ng-click="products.splice($index,1)">×</span>
    </li>
  </ul>
  <input ng-model="addItem">
  <button ng-click="products.push(addItem)">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

splice() メソッドは、配列に項目を追加/配列から削除します。

array.splice(index, howmanyitem(s), item_1, ....., item_n)

index : 必須。アイテムを追加/削除する位置を指定する整数。配列の末尾からの位置を指定するには、負の値を使用します。

howmanyitem(s) : オプション。削除するアイテムの数。0 に設定すると、アイテムは削除されません。

item_1, ..., item_n : オプション。配列に追加する新しい項目

score 3 · Accepted Answer

コントローラーでメソッドを呼び出す必要があることに同意しません。実際の機能にはサービスを使用する必要があり、スケーラビリティとモジュール性のために機能のディレクティブを定義し、ディレクティブに挿入するサービスへの呼び出しを含むクリックイベントを割り当てる必要があります。

たとえば、HTML では...

<a class="btn" ng-remove-birthday="$index">Delete</a>

次に、ディレクティブを作成します...

angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
    return function(scope, element, attrs){
        angular.element(element.bind('click', function(){
            myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);  
        };       
    };
}])

それからあなたのサービスで...

angular.module('myApp').factory('myService', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

このようにコードを適切に記述すると、コードを再構築することなく、将来の変更を非常に簡単に記述できるようになります。適切に編成されており、カスタムディレクティブを使用してバインドすることで、カスタムクリックイベントを正しく処理しています。

たとえば、クライアントが「サーバーを呼び出してパンを作り、モーダルをポップアップさせましょう」と言ったとします。HTML やコントローラーメソッドコードを追加または変更することなく、サービス自体に簡単にアクセスできます。コントローラーに 1 行しかない場合、最終的にはサービスを使用して、クライアントが要求するより重いものに機能を拡張する必要があります。

また、別の「削除」ボタンが必要な場合は、ページ上の任意の要素に簡単に割り当てることができるディレクティブ属性 (「ng-remove-birthday」) が用意されています。これにより、モジュール化され、再利用可能になりました。これは、Angular 2.0 の HEAVY Web コンポーネントパラダイムを扱う場合に便利です。2.0 にはコントローラーはありません。:)

ハッピーデベロップ!!!

score 1 · Accepted Answer

ここに別の答えがあります。それが役立つことを願っています。

<a class="btn" ng-click="delete(item)">Delete</a>

$scope.delete(item){
 var index = this.list.indexOf(item);
                this.list.splice(index, 1);   
}

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

完全なソースはこちら
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

html - ng-click を使用して配列からアイテムまたはオブジェクトを削除するにはどうすればよいですか?

12 に答える 12

あなたがng-repeatの中にいる場合

Related

Reference