javascript - 拼接处删除了 Angular 范围

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); 
    }
}]);

特别是我正在研究 close 方法，其余的工作正常。

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>

希望这有帮助。