web-dev-qa-db-ja.com

AngularJSのスコープから項目を削除する方法

簡単なやることリスト、しかし各項目のリストページに削除ボタンがあります。

enter image description here

関連テンプレートの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)を試しました。

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

何か案は？

javascripthtmlangularjs
153
Bye

あなたの問題は本当に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);
  });
};
257
Josh David Miller

person配列でpersonsのインデックスを見つけてから、その配列の splice メソッドを使用する必要があります。

$scope.persons.splice( $scope.persons.indexOf(person), 1 );
309
Joseph Silber

有用な関数のリストを含む Underscore.js ライブラリを使います。

without

without_.without(array, *values)

値のすべてのインスタンスを削除した配列のコピーを返します。

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
// => [2, 3, 4]

例

var res = "deleteMe";

$scope.nodes = [
  {
    name: "Node-1-1"
  },
  {
    name: "Node-1-2"
  },
  {
    name: "deleteMe"
  }
];

$scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {
  name: res
}));

JSFiddle のデモを参照してください。

filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

例

$scope.newNodes = _.filter($scope.nodes, function(node) {
  return !(node.name == res);
});

フィドル のデモを参照してください。

8
Maxim Shoustin
$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

これは私のために働きます！

7
cebor

Listに関連付けられている関数がある場合、splice関数を作ると、その関連付けも削除されます。私の解決策：

$scope.remove = function() {
    var oldList = $scope.items;
    $scope.items = [];

    angular.forEach(oldList, function(x) {
        if (! x.done) $scope.items.Push( { [ DATA OF EACH ITEM USING oldList(x) ] });
    });
};

リストパラメータの名前は アイテム。パラメーター x.done アイテムを削除するかどうかを示します。

他の参考文献： 他の例

あなたを助けたいと思います。ご挨拶.

4
Drako

これも使えます

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
2
Chetann

IndexOfは-1を返すので、@ Joseph Silberの受け入れられた答えはうまくいきません。これはおそらくAngularがハッシュキーを追加するためです。これは私の$ scope.items [0]と私のアイテムでは異なります。これをangular.toJson（）関数で解決しようとしましたが、うまくいきませんでした:(

ああ、私はその理由を知りました...私は私の$ scope.itemsを見ることによって私のテーブルの中に2つのカラムを作成するためにチャンクメソッドを使います。ごめんなさい！

2
gabn88
array.splice(array.pop(item));
1
Taran

AngularはarrayRemoveと呼ばれる組み込み関数を持っています。

arrayRemove($scope.persons, person)
1
Allen

スコープから要素を削除するには

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

からリンクの説明をここに入力してください

0
Cubiczx