Angular-Bootstrap UI选项卡：“删除”选项卡选项

Question

I have a special requirement for my project where I use Angular-UI-Bootstrap to create a tabbed view.

<uib-tab data-ng-repeat="pageTitle in form.pagetitles" heading="{{pageTitle}}"> 
    // tab content and so on...
</uib-tab>

I want to have a Button next to the Tab-Heading with a linked ng-click function. In this function I want to remove the page (still implemented, no help needed here).

<button data-ng-click='removePage(pageTitle)' class='btn btn-default'><span class='glyphicon glyphicon-wrench'></span></button>

My Problem: I do not have an idea how to get the button next to the heading. Can anyone help me?

Answer 1

Instead of using the attribute "heading" use the tag: <uib-tab-heading>

Something like:

<uib-tab data-ng-repeat="pageTitle in form.pagetitles">
  <uib-tab-heading>
    <div class="pull-left">{{pageTitle}}</div>
    <div class="pull-right">
      <button data-ng-click='removePage(pageTitle)' class='btn btn-default'><span class='glyphicon glyphicon-wrench'></span></button>
    </div>
  </uib-tab-heading>
  // tab content and so on...
</uib-tab>