web-dev-qa-db-ja.com

angularjsはスプライス機能を使用して選択したアイテムを削除します

グリッドからアイテムを削除するソリューションを探していました。それが私が以前に質問を投稿した理由です。しかし、誰かから解決策を受け取ったとき、そのときは問題は解決したと思いましたが、Filterメソッドを使用していました。

ただし、スプライス機能を使用してGRIDから項目を削除してください。

これが私の古い質問リンクです Angularjs、テーブル内の選択されたチェックボックスにアクションを適用する

スプライス機能を使って実行させたい。

現在私が直面している問題は、インデックス値を関数に渡し、そのインデックス値が選択またはフェッチされた場合にアイテムを削除できるようにすることです。修正方法がわかりません。

誰かが問題を解決し、更新されたコードへのデモリンクを提供するのはいいことです。

これが私がこれまでに試したもののPlunkerリンクです。 私の実行を示すPlunkerリンク

javascripthtmlangularjsangularjs-ng-repeat
5
Sizzling Code

チェックボックスにng-clickを追加して機能させました

http://plnkr.co/edit/DSVPj3holsf4nhNvEMbQ?p=preview

6
Ajay Beniwal

JS array.spliceメソッドの定義（from [〜＃〜] mdn [〜＃〜] ）：

array.splice（index、howMany [、element1 [、... [、elementN]]]）

したがって、removefunctionは次のように記述します。

$scope.remove = function(index){
  $scope.students.splice(index, 1);
};

デモプランカー

編集：

remove関数を指すng-clickで「x」ボタンをクリックして、アイテムを削除したいと考えました。

チェックボックスをクリックしてアイテムを削除するには、チェックボックスngModelを生徒のプロパティに設定し、このプロパティがtrueに設定されている生徒を削除する$ watcherを生徒に設定する必要があります。

<tr class="color2" ng-repeat="student in students | filter:search | filter:new_search">
  <td>{{student.Rollno}} <input type="checkbox" ng-model="student.checked"> </td>
  <td>{{student.Name}}</td>
  <td>{{student.Uni}} <button ng-click="remove($index)">x </button></td>
</tr>

$scope.$watch('students', function(students){
   if(!students){
     return;
   }
  $scope.students = students.filter(function(student){
    return !student.checked;
  });
}, true);

[〜＃〜] plnuker [〜＃〜]

7
Stewie