Question

我的Angular控制器包含一个数组和一个删除方法

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

您可以使用＆＃39;过滤＆＃39;返回原始范围你想要的所有itens，就像那样：

        $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>

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

3 个答案: