我想创建可关闭的选项卡(例如chrome选项卡或firefox选项卡,每个选项卡上都有一个小的“x”).如何在UI-Bootstrap中配置现成的选项卡组件以添加此功能?
谢谢.
你可以使用html&在标签标题中点按,例如
<div ng-controller="mainCtrl">
<tabset>
<tab ng-repeat="t in tabs">
<tab-heading>{{t.title}} <a ng-click="removeTab($index)" href=''><i class="icon-remove"></i></a></tab-heading>
<div ng-bind-html-unsafe='t.content'></div>
</tab>
</tabset>
</div>
angular.module('myApp',['ui.bootstrap']).controller("mainCtrl",function ($scope) {
$scope.tabs = [{
title: "one",content: '<h1>tab one</h1>'
},{
title: "two",content: '<h1>tab two</h1>'
},{
title: "three",content: '<h1>tab three</h1>'
}];
$scope.removeTab = function (index) {
$scope.tabs.splice(index,1);
};
});
JSfiddle:http://jsfiddle.net/alfrescian/ZE9cE/