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

how to delete object in an array with filter used? AngularJS

本文关键字：过滤器 对象 AngularJS 何删除 删除 数组      更新时间：2023-09-26

我有一个类似输入的东西，可以将项目添加到第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>

提前感谢大家。

您可以通过两种方式来实现这一点-

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的例子供你们参考。

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

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

相关文章：