簡単なやることリスト、しかし各項目のリストページに削除ボタンがあります。
関連テンプレートの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人をスコープから削除するだけです。
何か案は?
あなたの問題は本当に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);
});
};
person
配列でpersons
のインデックスを見つけてから、その配列の splice
メソッドを使用する必要があります。
$scope.persons.splice( $scope.persons.indexOf(person), 1 );
有用な関数のリストを含む 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);
});
フィドル のデモを参照してください。
$scope.removeItem = function() {
$scope.items.splice($scope.toRemove, 1);
$scope.toRemove = null;
};
これは私のために働きます!
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 アイテムを削除するかどうかを示します。
他の参考文献: 他の例
あなたを助けたいと思います。ご挨拶.
これも使えます
$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
IndexOfは-1を返すので、@ Joseph Silberの受け入れられた答えはうまくいきません。これはおそらくAngularがハッシュキーを追加するためです。これは私の$ scope.items [0]と私のアイテムでは異なります。これをangular.toJson()関数で解決しようとしましたが、うまくいきませんでした:(
ああ、私はその理由を知りました...私は私の$ scope.itemsを見ることによって私のテーブルの中に2つのカラムを作成するためにチャンクメソッドを使います。ごめんなさい!
array.splice(array.pop(item));
AngularはarrayRemove
と呼ばれる組み込み関数を持っています。
arrayRemove($scope.persons, person)
スコープから要素を削除するには
// remove an item
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};