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

【问题标题】：how to delete object in an array with filter used? AngularJS如何使用过滤器删除数组中的对象？ AngularJS
【发布时间】：2016-02-21 02:49:07
【问题描述】：

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

我的角脚本

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>

提前谢谢大家。

【问题讨论】：

标签： javascript jquery angularjs filter

【解决方案1】：

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

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

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

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

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

请注意，当应用过滤器时，$index 可能不是您应该用来删除的，最好使用第一种方法。我已经给出了 $index 的例子供你参考。

【讨论】：

【解决方案2】：

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

应该可以工作，因为item 之前在ng-repeat 中定义，并且您已经在$scope 上定义了remove 函数。

【讨论】：