Cách tạo tab có thể đóng trong angularjs UI-Bootstrap

Question

Tôi muốn tạo các tab có thể đóng (như tab chrome hoặc tab firefox, có tab "x" nhỏ trên mỗi tab). Làm thế nào để cấu hình thành phần tab sẵn sàng trong UI-Bootstrap để thêm chức năng này?

Cảm ơn.

Answer 1

bạn có thể sử dụng html & ng-nhấp vào trong tiêu đề tab của bạn, ví dụ:

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