У меня есть переменная массива в $ scope, которую я использую для создания вкладок на лицевой стороне. У меня возникла проблема с реализацией функции tab tab. Я использую 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, которую я создал, все вкладки закрываются. Странная часть состоит в том, что консоль также очищается. Я не совсем уверен, что происходит.
Спасибо за ваше время!
Хорошо, я немного изменил ваш код, чтобы получить визуальные эффекты. Таким образом, разница была
//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>
$scope.removeTab = function(index) ....