javascript - 如何使用过滤器删除数组中的对象？ AngularJS

Question

我有一个类似于输入的东西，可以将项目添加到第 1 列或第 2 列，每次添加项目时，该列都会立即显示添加的内容，旁边有一个“X”，所以如果你想删除项目只需单击“X”。起初我没想太多，所以我使用了一种简单的方法来删除 HTML，但后来我意识到，这只是删除 HTML(还有一个搜索输入，如果我在搜索中输入内容并清除搜索，所有项目将再次显示).这是我意识到只删除 HTML 是一个错误，我也需要删除该对象，但我怎样才能让它删除数组中的正确对象？

我的 Angular 脚本

angular.module("addItemApp", [])
    .controller("toDoCtrl", function ($scope) {
    $scope.items = [];
    $scope.addItem = function (item) {
        console.log(item);
        $scope.items.push(angular.copy(item));
        console.log($scope.items);
    };
    $scope.remove = function (item) {
        var index = $scope.items.indexOf(item);
        $scope.items.splice(index, 1);
    }
});

我的html

<div class="row">
    <div class="col-xs-6 col-sm-4 left-column">
        <div class="input-item">
            <input type="text" placeholder="Enter Item" ng-model="item.name" class="enter-item">
            <select class="column-select" ng-model="item.pos">
                <option value="default" selected>Choose Column</option>
                <option value="column1">Column 1</option>
                <option value="column2">Column 2</option>
            </select>
            <button class="add-button" type="button" ng-click="addItem(item)">Add Item</button>
        </div>
        <div class="search-item">
            <label for="search">Search An Item</label>
            <div class="search-input">
                <input ng-model="query" type="text" placeholder="Search" id="search"><span class="fa fa-search icon-search"></span>

            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
         <h3 class="column-header column1">
              Column 1
         </h3>

        <ul ng-repeat="item in items | filter:{ pos: 'column1' } | filter:query">
            <li>{{item.name}}
                <button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
            </li>
        </ul>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
         <h3 class="column-header column2">
              Column 2
         </h3>

        <ul ng-repeat="item in items | filter:{ pos: 'column2' } | filter:query">
            <li>{{item.name}}
                <button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
            </li>
        </ul>
    </div>
</div>

提前谢谢大家。

Answer 1

你可以通过两种方式做到这一点-

1

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

<button ng-click="remove(item)"></button>

2

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

<button ng-click="remove($index)"></button>

请注意，当应用过滤器时，$index 可能不是您应该用来删除的那个，最好使用第一种方法。我给出了 $index 的例子供大家引用。