AngularJS删除范围内数组的最后一个元素

Question

我在Angular中有我的控制器，其中包含一个数组和一个delete方法

function($scope, $http){
    $scope.arrayOfObjects = [];
    $scope.remove = function(obj){
        var i = $scope.arrayOfObjects.indexOf(obj);
        if( i > -1 ){
            $scope.arrayOfObjects.splice(i, 1);
        }
    }
// Some other things
}

HTML

<a href ng-repeat="(key, obj) in arrayOfObjects track by $index">{{obj.id}}

<button type="button" role="button" class="btn btn-default" ng-click="remove(obj)">
   <i class="fa fa-trash"></i>
   <span>Delete</span>
</button>

</a>

现在，当我删除除上一个对象以外的其他对象时，一切正常。 当用户按下最后一个对象的删除按钮时，该页面将重定向到localhost：3000 /＃，该主机未映射到任何内容，而我得到了一个空白页面。

有没有人遇到过这种行为？

Answer 1

当其他答案解决您的链接/重定向问题时，可以通过在锚标记中没有其他可单击项来解决该问题，但更大的问题是您使用了错误的语法来遍历数组的对象。

要遍历数组，您需要这样做：

ng-repeat="obj in arrayOfObjects"

您使用的语法用于迭代单个对象的属性。 key和value是传递给中继器的参数

ng-repeat="(key, value) in object"

您最想要的是这样的东西：

<div ng-repeat="obj in arrayOfObjects">
  {{obj.id}}
  <button ng-click="remove(obj)">Delete</button>
</div>

codepen

Answer 2

您可以使用“过滤器”将所需的所有迭代恢复到原始范围，如下所示：

        $scope.remove = function (objs) {
            $scope.objs = objs.filter(function (obj) {
               //Here you remove the item you do not want   
               return obj;
            });
        };

HTML：

    <button class="btn btn-danger btn-block" ng-click="remove(objs)">Delete</button>

Answer 3

可以使用pop()删除最后一个元素，并返回该元素，例如$scope.arrayOfObjects.pop()

 angular.module('app', []) .controller('mycontroller', function($scope) { $scope.arrayOfObjects = [{ id: 1 }, { id: 2 }, { id: 3 }] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="mycontroller"> <button ng-click="arrayOfObjects.pop()">remove in inline</button> <ul> <li ng-repeat="myobj in arrayOfObjects">{{myobj.id}}</li> </ul> </div>