AngularJSで要素を削除：ng-click、ng-repeat、filterパイプを駆使

2024-06-01

HTMLとAngularJSでng-clickを使って配列から要素やオブジェクトを削除する方法

AngularJSで、ng-clickディレクティブを使用して、配列から要素またはオブジェクトを削除する方法について説明します。

例

次の例では、$scope.itemsという配列にアイテムのリストが格納されています。各アイテムには、nameとageというプロパティがあります。

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="item in items">
      {{ item.name }} - {{ item.age }}
      <button ng-click="removeItem(item)">削除</button>
    </li>
  </ul>
</div>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.items = [
      { name: 'John', age: 30 },
      { name: 'Jane', age: 25 },
      { name: 'Peter', age: 40 }
    ];

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

この例では、removeItemという関数を使用して、配列からアイテムを削除しています。この関数は、indexOfメソッドを使用して、削除するアイテムのインデックスを取得します。次に、spliceメソッドを使用して、そのインデックスから1つの要素を削除します。

ポイント

ng-clickディレクティブを使用して、ボタンをクリックしたときに呼び出す関数を指定します。
indexOfメソッドを使用して、削除するアイテムのインデックスを取得します。
spliceメソッドを使用して、配列から要素を削除します。

補足

オブジェクトを削除するには、indexOfメソッドを使用してオブジェクトの参照を取得してから、spliceメソッドを使用して削除します。
配列の要素を追加するには、pushメソッドを使用します。
配列の要素を編集するには、要素のインデックスを使用してアクセスしてから、そのプロパティを変更します。

サンプルコード：HTMLとAngularJSでng-clickを使って配列から要素を削除

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <h2>アイテムリスト</h2>
  <ul>
    <li ng-repeat="item in items">
      {{ item.name }} - {{ item.age }}
      <button ng-click="removeItem(item)">削除</button>
    </li>
  </ul>
</div>

JavaScript

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.items = [
      { name: 'John', age: 30 },
      { name: 'Jane', age: 25 },
      { name: 'Peter', age: 40 }
    ];

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

このコードの説明

- ng-appディレクティブを使用して、AngularJSアプリケーションを初期化します。
- ng-controllerディレクティブを使用して、myCtrlというコントローラーを指定します。
- <h2>要素を使用して、ページのタイトルを表示します。
- ul要素を使用して、アイテムのリストを作成します。
- ng-repeatディレクティブを使用して、$scope.items配列の各アイテムをループ処理します。
- 各アイテムに対して、li要素を使用して名前と年齢を表示します。
- button要素を使用して、「削除」ボタンを作成します。
- angular.moduleを使用して、AngularJSモジュールを作成します。
- $scope.items変数を使用して、アイテムのリストを格納します。

このコードを実行する方法

このコードをHTMLファイルとJavaScriptファイルに保存します。
HTMLファイルをWebブラウザで開きます。

このコードを実行すると、次のようになります。

ページにアイテムのリストが表示されます。
ユーザーがアイテムの横にある「削除」ボタンをクリックすると、そのアイテムがリストから削除されます。

このコードは、次のようなさまざまな目的に応用できます。

ショッピングカートからアイテムを削除する
タスクリストからタスクを削除する

HTMLとAngularJSでng-clickを使って配列から要素を削除するその他の方法

方法1：ng-repeatのtrack byオプションを使用する

ng-repeatディレクティブのtrack byオプションを使用すると、AngularJSに各アイテムの一意な識別子を伝えることができます。これにより、AngularJSはアイテムをより効率的に追跡し、変更を検出することができます。

<ul>
  <li ng-repeat="item in items track by item.id">
    {{ item.name }} - {{ item.age }}
    <button ng-click="removeItem(item.id)">削除</button>
  </li>
</ul>

$scope.items = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Peter', age: 40 }
];

$scope.removeItem = function(id) {
  var index = $scope.items.findIndex(function(item) {
    return item.id === id;
  });
  $scope.items.splice(index, 1);
};

この例では、item.idプロパティをtrack byオプションの値として使用しています。これにより、AngularJSは各アイテムのIDに基づいてアイテムを追跡することができます。

方法2：filterパイプを使用する

filterパイプを使用すると、配列から特定の条件に一致する要素を抽出することができます。この方法を使用して、削除するアイテムを配列から抽出してから、spliceメソッドを使用して削除することができます。

<ul>
  <li ng-repeat="item in items | filter: filterItems">
    {{ item.name }} - {{ item.age }}
    <button ng-click="removeItem(item)">削除</button>
  </li>
</ul>

$scope.items = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Peter', age: 40 }
];

$scope.filterItems = function(item) {
  return item.name !== 'Peter';
};

$scope.removeItem = function(item) {
  $scope.items = $scope.items.filter(function(i) {
    return i !== item;
  });
};