拼接阵列/效果

时间:2015-08-19 18:14:45

标签: javascript angularjs

我在$ scope中有一个数组变量,用于在前端创建选项卡。我在实现删除标签功能时遇到了问题。我正在使用AngularJS / bootstrap。 这是删除标签的代码:

var removeTab = function (index) {
    $scope.tabs.splice(index, 1);
};

这是我创建标签的代码:

 <tabset class="tab-container">
    <tab id = "tabContent" ng-repeat="tab in tabs" active="tab.active" ng-select="select"> <!-- the tab highlight directive -->
      <tab-heading>
      <span>{{tab.title}}</span>
      <i class="glyphicon glyphicon-remove" ng-click="removeTab($index)"></i> <!-- the tab close button -->
    </tab-heading>

    <textarea ui-codemirror= "{ onLoad : codemirrorLoaded }"></textarea>

  </tab>

当我打开多个标签然后尝试使用我创建的removeTab按钮关闭一个标签时,所有标签都会关闭。奇怪的是,控制台也清除了自己。我不完全确定发生了什么。

谢谢你的时间!

1 个答案:

答案 0 :(得分:0)

好的,我只是稍微修改了你的代码以获得视觉效果。所以差异是

//Your function 
var removeTab = function(index){
   $scope.tabs.splice(index,1);
}
__________
//changed it to
$scope.removeTab = function(index){
   $scope.tabs.splice(index,1);
}

var app = angular.module('tabco',[]);

app.controller('TabCtrl', ['$scope', function($scope){
  $scope.tabs = [{value:1},{value:2},{value:3},{value:4}];
  $scope.removeTab = function(index){
    $scope.tabs.splice(index,1);
  }
}]);
.tabcont{
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <div ng-app="tabco" class="tab-container"  ng-controller="TabCtrl">
    <div class="tabcont" ng-repeat="tab in tabs" > <!-- the tab highlight directive -->
      <div>
        <span>{{tab.value}}</span>
        <i class="glyphicon glyphicon-remove" ng-click="removeTab($index)">X</i> <!-- the tab close button -->
      </div>

    <textarea></textarea>

    </div>
   </div>