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

发布时间：2020-12-17 07:20:47 所属栏目：安全来源：网络整理

导读：我想创建可关闭的选项卡(例如chrome选项卡或firefox选项卡,每个选项卡上都有一个小的“x”).如何在UI-Bootstrap中配置现成的选项卡组件以添加此功能？谢谢. 你可以使用html在标签标题中点按,例如 div ng-controller="mainCtrl" tabset tab ng-repeat="t in

我想创建可关闭的选项卡(例如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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!