如何在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/