我有一个消息列表,它们被绑定为来自JSON源的HTML列表。每个图像旁边都有一个删除按钮。当点击该邮件旁边的删除按钮时,我想从列表中删除邮件。
HTML:
<div ng-app="myApp">
<ul ng-controller="MessagesCtrl">
<li ng-repeat="message in messages.data" id="message{{message.id}}">
<a href="#" class="messageIcon">{{message.message}}</a>
<a ng-click="deleteItem()">x</a>
</li>
</ul>
</div>
JS:
var myApp = angular.module("myApp", []);
myApp.factory("Messages", function () {
var Messages = {};
Messages.data = [
{
id: "1",
message: "Message 1"
},
{
id: "2",
message: "Message 2"
},
{
id: "3",
message: "Message 3"
},
{
id: "4",
message: "Message 4"
}
];
return Messages;
});
function MessagesCtrl($scope, Messages) {
$scope.messages = Messages;
$scope.deleteItem = function () {
var id = this.message.id;
//alert(id);
Messages.data.delete({ id: id }, function () {
$("#message" + id).fadeOut();
});
}
}
小提琴:http://jsfiddle.net/L82S7/
我发现这样做的例子使用'.delete'或'.splice' - 两者都会产生如下控制台错误:
TypeError: Object #<Object> has no method 'splice'
有人可以建议如何让这个工作吗?
谢谢!
答案 0 :(得分:19)
splice
在这里工作正常:
<a ng-click="deleteItem($index)">x</a>
$scope.deleteItem = function (index) {
Messages.data.splice(index, 1);
}
答案 1 :(得分:3)
是splice
正常。我以不同的方式完成了这里,请看http://jsfiddle.net/cmyworld/NEPZF/1/
基本上我传递了这个项目。