我在$ 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按钮关闭一个标签时,所有标签都会关闭。奇怪的是,控制台也清除了自己。我不完全确定发生了什么。
谢谢你的时间!
答案 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>