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

时间:2015-06-04 02:28:23

标签: javascript angularjs

我的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 /#,它没有映射到任何东西,我得到一个空白页面。

有没有人遇到过这样的行为?

3 个答案:

答案 0 :(得分:0)

虽然其他答案正在解决你的链接/重定向问题,这可以通过在锚标记中没有额外的可点击项来解决,但更大的问题是你使用错误的语法来迭代数组的对象

迭代你想要的数组:

ng-repeat="obj in arrayOfObjects"

您正在使用的语法是迭代单个对象的属性。其中keyvalue是传递给转发器的参数

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

你最想要的是这样的东西:

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

codepen

答案 1 :(得分:0)

您可以使用&#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>

答案 2 :(得分:0)

可以使用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>