Panel标题中的UI Bootstrap Tab标题

Question

我正在尝试执行this (can be done in simple jQuery+ bootstrap)

之类的操作

但是如何通过 angularjs（1.x）和 ui-bootstrap 来实现此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;
}