angularjs - 如何在 angularjs UI-Bootstrap 中创建可关闭的选项卡

Question

我想创建可关闭的选项卡(例如 chrome 选项卡或 firefox 选项卡，每个选项卡上都有一个小“x”)。如何配置UI-Bootstrap中现成的选项卡组件来添加此功能？

谢谢。

Answer 1

您可以在选项卡标题中使用 html 和 ng-click，例如

<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/