1. ホーム
  2. javascript

[解決済み] AngularJSのスコープで配列から項目を削除する方法は?

2022-04-27 08:14:03

質問

シンプルなToDoリストですが、リストページで各項目に削除ボタンがあります。

関連するテンプレートHTMLです。

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

関連するコントローラのメソッドです。

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

試してみた $scope.persons.pull(person)$scope.persons.remove(person) .

データベースは正常に削除されましたが、私はスコープからこのアイテムを引き出すことができませんし、クライアントがすでに持っているデータのためにサーバーにメソッドコールをしたくないので、私はスコープからこの一人を削除したいだけです。

何かアイデアはありますか?

解決方法は?

あなたの問題は、Angularの問題ではなく、Arrayのメソッドにあります。配列から特定のアイテムを削除する適切な方法は、以下のとおりです。 Array.splice . また、ng-repeat を使用する場合、特別な $index プロパティがあり、これは渡した配列の現在のインデックスを表します。

解決方法は、実はとても簡単です。

表示します。

<a ng-click="delete($index)">Delete</a>

コントローラーです。

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};