Question

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

先谢谢大家。

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

Answer 2

Read()

应该可以使用，因为<button ng-click="remove(item)"></button>中已定义了item，您已经在ng-repeat上定义了remove函数。

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

2 个答案: