Questions tagged [angular-ui-bootstrap-tab]

Refers to the Angular UI Bootstrap tabs directive, which is an Angular implementation of Bootstrap tabs.

refers to the Angular UI Bootstrap tabs directive, which is an Angular implementation of Bootstrap Tabs.

Example of usage (0.14.3) :

<uib-tabset>
   <uib-tab heading="Static title">Static content</uib-tab>
   <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
   </uib-tab>
   <uib-tab select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
   </uib-tab>
</uib-tabset>

Documentation :
Angular UI Bootstrap -> https://angular-ui.github.io/bootstrap/#/tabs
Bootstrap Tabs -> http://getbootstrap.com/javascript/#tabs

56 questions
15
votes
2 answers

How to pass form data from angular ui bootstrap modal to view

I'm creating a webapp and I want to implement an option to add friends. I've created the add friend page as a modal with a text input field. I want to test this by displaying the input on my view page. How do I display this data onto my view…
user2016462
  • 237
  • 1
  • 3
  • 6
6
votes
2 answers

Dynamic Content in Dynamic Tab (Angular, UI Bootstrap)

I'd like to use ng-include in the content of a dynamically generated tab using AngularJs and UI Bootstrap. I have a Plunker here: http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p=preview
4
votes
1 answer

Angularjs - Horizontal scroll upon button click

How to do horizontal scroll on click with right and left arrow.
3
votes
2 answers

Is there any way to assign ng-controller dynamically when iterate over an collection of objects?

Using angular 1.6.6 and ui-bootstrap 2.5.0 I'm trying to use a controller if the action property value is not null. The logic for each of my tabs is very different so that I don't want to put all tabs in a single controller. Is there any way for…
3
votes
2 answers

Angular UI bootstrap tabs - Can't change tabs with a button inside a tab

I'm trying to change my active tab with a button inside the tab directive uib-tabset, but the button is only working OUTSIDE this directive. What am I doing wrong? Here's the code:
3
votes
1 answer

columnDefs header does not show from time to time

I have a very random problem on UI. It looks like the column definitions do not show from time to time. it works fine 9 out of 10 times. Two gif animations have been included to show what I actually mean as that will help to understand the issue…
3
votes
1 answer

How does transclusion on Angular UI Bootstrap's directive work?

I'm currently trying to create a directive that has two transcluded sections and have been unsuccessful so far. Now I discovered that the tab directive of Angular UI Bootstrap does exactly that! Unfortunately, the angular trickery that they pull off…
2
votes
0 answers

Moving from ui-Bootstrap to ng-Boostrap

I want to migrate from ui-bootstrap to ng-bootstrap as they both are really different.How do you migrate from ui-Bootstrap to ng-Bootstrap? do you have some migration guide?
2
votes
0 answers

Ui-Bootstrap: Error: [$compile:ctreq]

I have written a tabset in the body of an html page. However, only a portion show up and the others are presented near the header as list items represented by a bullet point. I know I have everything installed correctly, as on another page I have…
2
votes
0 answers

How do move focus to input within Angular-ui / bootstrap tabset container?

We are working to make our application as accessible as possible. We need to allow customers to keep their hands on the keyboard and tab all the way through the application. We are using angular-ui/bootstrap horizontal navset tabs to display and…
2
votes
3 answers

Angular UI bootstrap pagination not working inside ui.bootstrap.tabs

Angular UI bootstrap gives awesome solutions. Very unfortunately Pagination (ui.bootstrap.pagination) does not working inside Tabs (ui.bootstrap.tabs) DEMO http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview angular.module('mytodos',…
1
vote
0 answers

How to apply the multiple condition angular ui-tab to add active class?

I am trying to display menu and sub-menu using ui.bootstrap from angular.js but while selecting submenu the respective parent menu is not getting active class. dashboard.html:
  • satya
    • 3,508
    • 11
    • 50
    • 130
  • 1
    vote
    1 answer

    angularjs uib-tabset not working under ui-bootstrap 2.5.0

    Why this snippet is not working? By clicking on the button, it should switch to the selected tab. Whereas this example here with different versions of angularjs and bootstrap work: Link: angularjs switch tab view using ui.bootstrap What is the…
    1
    vote
    1 answer

    AngularJS, UI Bootstrap's Tabs and Datatables

    I am using UI Bootstrap's Tabs and inserting Datatables in each tab but the datatable is not getting rendered. If I remove uib-tabset and uib-tab the datatable gets rendered. Here's the html code
    1
    vote
    1 answer

    Using angular-ui-bootstrap in Angular2

    I am using Angular2 with typescript. The dependencies are resolved using npm. I want to use Modal dialog in my application. For this, I need to include angular-ui-bootstrap in my application. I need to angular-ui-bootstrap modal dialog in my…
    1
    2 3 4