Question

我有一个Angular应用程序，我正在尝试正常工作。显然，只有一行代码可以使它工作，但我不知道它是什么。我还在学习Angular，而且我对Javascript也不是很擅长。我已经做到这一点，以便输入到输入中的任何内容都会添加到列表中。但是，当我单击按钮删除项目时，它只删除所有项目。我该怎么做才能解决它？

  <body ng-app="myApp">
        <div ng-controller="GroceryController">
            <header>
                <h1>Matt's Grocery List</h1>

                <div>
                    <form ng-submit="addItem()">
                        <div>
                            <input type="text" ng-model="newItem" placeholder="New things">
                            <button type="submit">Save</button>
                        </div>
                    </form>
                </div>
            </header>
            <section id="list">
            <p>"{{ newItem }}"</p>

            <div>
                <h4>{{ groceries.length }} total items</h4>
                <table>
                    <tr ng-repeat="gro in groceries">
                        <td>{{gro}}</td>
                        <td>
                            <button class="remove" ng-click="removeItem(gro)">&times;</button>
                        </td>
                    </tr>
                </table>
            </div>
            </section>
        </div>
    </body>

var app = angular.module('myApp', []);

app.controller('GroceryController', function($scope){

    $scope.groceries = ['Nails', 'Pipe', 'Wood'];

    $scope.addItem = function() {
        $scope.groceries.push($scope.newItem);
        $scope.newItem = '';
    }

    $scope.removeItem = function(item) {
        var idx = $scope.groceries.indexOf(item);
            $scope.groceries.splice(idx.l);
    }
});

我这里有一个JSfiddle，但实际上我无法让它在那里运行。当我尝试在浏览器中执行它时，它运行得很好。也许你可以让它运行然后你可以找出问题。我真的很感激！感谢。

https://jsfiddle.net/bt08rbqt/

Answer 1

splice方法有错误。使用如下 -

$scope.removeItem = function(item) {
    $scope.groceries.splice($scope.groceries.indexOf(item),1);
}

Angular Grocery List - 删除单个项目

1 个答案: