剪接角范围删除

Question

当尝试使用剪接从列表中删除一个项目时，我的整个列表被销毁了吗？会是什么原因呢？

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)"`