1. ホーム
  2. ハイパーリンク

[解決済み] ng-clickを使用して配列から項目またはオブジェクトを削除するにはどうすればよいですか?

2022-04-02 20:43:50

質問

ボタンがクリックされたときにアイテムを削除できる関数を書こうとしているのですが、関数が混乱しているようです。 $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();
};

解決方法は?

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

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

次にコントローラで。

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

Angularは自動的に bdays 配列の更新を行い ng-repeat

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

EDIT: サーバーでライブアップデートを行う場合、以下の方法で作成したサービスを使用します。 $resource サーバーの更新と同時にアレイの更新を管理します。