UI引導標籤標題

Question

我試圖做類似this(can be done in simple jQuery+ bootstrap)

但我怎樣才能angularjs（1.x中）和UI，引導 它看起來像基本實現這個UI像this

Controller.js

var myApp = angular.module('myApp', ['ui.bootstrap']); 
     myApp.controller("homeCtrl", function ($scope) { 
      $scope.tabs = [{ 
       title: 'Dynamic Title 1', 
       content: 'Dynamic content 1' 
      }, 
     { 
      title: 'Dynamic Title 2', 
      content: 'Dynamic content 2', 
     }, 
     { 
      title: 'Dynamic Title 3', 
      content: 'Dynamic content 3', 
     }, 
     { 
      title: 'Dynamic Title 4', 
      content: 'Dynamic content 4', 
     } 
      ]; 

     }); 

的Html

<uib-tabset active="active"> 
        <uib-tab index="0" heading="Static title">Static content</uib-tab> 
        <uib-tab index="$index+1" ng-repeat="tab in tabs track by $index"> 
         <uib-tab-heading> 
          {{tab.title}} 
          <div class="close" aria-label="Close" ng-click="remove($index, $event)"> 
           <span aria-hidden="true">×</span> 
          </div> 
         </uib-tab-heading> 
         {{tab.content}} 
        </uib-tab> 
       </uib-tabset> 

對不起，我的英文不好，並在此先感謝。

Answer 1

I Did it,

HTML

<div class="panel-heading"> 
       <uib-tabset active="active" > 
        <uib-tab index="$index+1" ng-repeat="tab in tabs track by $index"> 
         <uib-tab-heading > 
          {{tab.title}} 
          <div class="close" aria-label="Close" ng-click="remove($index, $event)"> 
           <span aria-hidden="true">×</span> 
          </div> 
         </uib-tab-heading> 
         <div class="panel-body"> 
          {{tab.content}} 
         </div> 
        </uib-tab> 
       </uib-tabset> 
      </div> 

CSS

.tab-pane>.panel-body 
{ 
    background-color: white; 
    margin-left: -10px; 
    margin-right: -10px; 
    z-index: 1000000000000000; 
    margin-top: -1px; 
    position: relative; 
    padding:10px; 
}