Question

当尝试使用splice从列表中删除项目时，我的整个列表都被销毁了？可能是什么原因造成的？

HTML：

<ul class="nav nav-tabs">
  <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="select(pane)">
          {{pane.title}}&nbsp;
          <sup ng-click="close(pane)">x</sup>
      </a>
  </li>
  <li>
      <a href="" ng-click="createPane()">+</a>
  </li>
</ul>

JS

.controller('editCtrl', ['$scope', function($scope){

    $scope.panes = [];
    var ctrl  = this;
    /*===========Select===========*/
    $scope.select = function(pane) {
      angular.forEach($scope.panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;
    };
    /*==========Add-Pane=========*/
    this.addPane = function(pane) {
      if ($scope.panes.length === 0) {
        $scope.select(pane);
      }
      $scope.panes.push(pane);
    };
    /*===========Create===========*/
    $scope.createPane = function() {
        var pane = {
            title: 'untitled',
            content: 'Scope:'+$scope.$id
        }
        ctrl.addPane(pane);
    };
    /*===========Close===========*/
    $scope.close = function(pane) {
        var idx = $scope.panes.indexOf(pane);
        //$scope.panes.splice(pane, 1);
        if (idx != -1) $scope.panes.splice(idx, 1); 
    }
}]);

特别是我正在看关闭方法，其余工作正常。

Answer 1

我认为你的名单并没有被任何东西摧毁。

但是，href=""代码上的<a>会在点击x图标时刷新整个页面。

尝试删除href这样的内容：

<ul class="nav nav-tabs">
  <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a ng-click="select(pane)">
          {{pane.title}}&nbsp;
          <sup ng-click="close(pane)">x</sup>
      </a>
  </li>
  <li>
      <a ng-click="createPane()">+</a>
  </li>
</ul>

希望这有帮助。

Answer 2

当您将$index作为参数发送到close($index)函数时，您已经传递了要删除的窗格的索引。

因此，你的关闭函数应如下所示：

$scope.close = function(i){
    var removedPane = $scope.panes.splice(i,1);
    // do something here with the "removedPane" if you want to
};

这一行

var idx = $scope.panes.indexOf(pane);

正在尝试查找发送给函数的索引的索引，因此idx很可能未定义。

修改

你需要回到这样的关闭：

`ng-click="close($index)"`

在splice上删除了角度范围

2 个答案: