使用AngularJs从数据绑定的JSON列表中删除项目

时间:2013-09-13 11:51:32

标签: angularjs angularjs-scope

我有一个消息列表,它们被绑定为来自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'

有人可以建议如何让这个工作吗?

谢谢!

2 个答案:

答案 0 :(得分:19)

splice在这里工作正常:

<a ng-click="deleteItem($index)">x</a>

$scope.deleteItem = function (index) {
    Messages.data.splice(index, 1);
}

http://jsfiddle.net/L82S7/1/

答案 1 :(得分:3)

splice正常。我以不同的方式完成了这里,请看http://jsfiddle.net/cmyworld/NEPZF/1/

基本上我传递了这个项目。