Angular-Bootstrap UI Tabs: Remove Tab Option

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?

o4ohel · Accepted Answer · 2015-12-08 22:02:45Z

4

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>

answered Dec 8, 2015 at 22:02

o4ohel

1,78913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular-Bootstrap UI Tabs: Remove Tab Option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related