Question

我正在使用angularJS来构建SPA。我试图从我的控制器中的数组中删除一个对象。我正在使用ng-repeat，似乎无法理解这一点。这是相关的html：

<div class="cat-button" ng-repeat="category in cats" category="category">
         <button class=" close-button" ng-click="removeCat()">
         <span class="glyphicon glyphicon-remove-sign" aria-hidden=true> </span> </button>{{category.name}}
</div>

这创建了一个div，其中包含一个按钮，用于保存到$scope.cats数组的每个对象。它工作正常，但我无法弄清楚如何使用每个div中的按钮删除该特定对象。

当我点击按钮时，我的控制器上的功能被调用，但这是我迷路的地方，我该如何删除用户动态创建的特定对象。

这是我控制器上的相关代码：

 //Function to delete category

$scope.removeCat = function () {

   //I know I have to use splice on my array but how do I Identify the object that needs to be deleted from my array?



};

Answer 1

你可以这样传递$index：

<button class=" close-button" ng-click="removeCat($index)">

并在您的函数中：

$scope.removeCat = function (index) {
    $scope.cats.splice(index,1);
}

或传递整个项目并使用indexOf（保护方式）

<button class=" close-button" ng-click="removeCat(category)">

$scope.removeCat = function (item) {
    $scope.cats.splice(myArray.indexOf(item), 1);
}

Answer 2

您可以在ng-click功能中传递要删除的项目的索引：

<div class="cat-button" ng-repeat="category in cats" category="category">
         <button class=" close-button" ng-click="removeCat($index)">
         <span class="glyphicon glyphicon-remove-sign" aria-hidden=true> </span> </button>{{category.name}}
</div>

然后你可以在Angular控制器中使用它，如下所示：

$scope.removeCat = function (index) {
    $scope.cats.splice(index, 1);
};

<强>更新

如果您不想传入索引，您也可以传入整个对象并在控制器中找到索引。以下代码设置为适用于所有浏览器。（只是没有经过测试;））

$scope.removeCat = function (cat) {
    // Using underscore
    var index = _.indexOf($scope.cats, cat);

    // Or using a for loop
    for(var i = 0; i < $scope.cats.length; i++) {
       //Assuming your cat object has an id property
       if($scope.cats.id === cat.id) {
           index = i;
           break;
       }
    }
};

或者以任何其他方式定位数组中对象的索引。

Answer 3

ng-click="removeCat(category)"

$scope.removeCat = function (categoryToDelete) {

    var index = $scope.cats.indexOf(categoryToDelete);
    $scope.cats.splice(index, 1);  

};

按按钮从数组中删除项目

3 个答案: