Angular UI Bootstrap tabset with ng-repeat

Question

I'm trying to upgrade my version of bootstrap-ui from 0.14.x to the latest 1.3.2 and I'm encountering some issues regarding the uib-tabset / uib-tab directives.

What I'm trying to do is dynamically create tabs using ng-repeat and have the 'active' tab be handled by expressions or properties of my repeat model.

 <uib-tabset type="pills" active="{{activeItem.Id}}"  >
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)" id="{{$index}}"
             index="{{item.Id}}">

The index="{{item.Id}}" binding does not work at all. So I can't seem to set my tab indexes via an expression, which wouldn't be a problem if I could get the uib-tabset to use the active property once the ng-repeat was complete.

activeItem is a property on $scope of the enclosing controller.

Adding this binding results in an error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{item.Id}}] starting at [{item.Id}}].

If I omit everything (the index attribute on uib-tab and active attribute on uib-tabset) it doesn't throw any errors but it also doesn't select any tabs by default, meaning I need to click one to activate that tab. Even though the documentation states that the defaults are "defaulting to the first tab".

Any reason ng-repeat no longer works properly with this directive set? I'm probably missing something here but I'm stumped.

Thanks

Edit: Here is a plunkr link showing the issue I'm having. https://plnkr.co/edit/DWOILq?p=preview

I have tried that too, it doesn't bind the expression so it ends up just being literally index="item.Id" and doesn't interpolate it. — Tyler O
– Tyler O, Commented Apr 26, 2016 at 14:15
Shashank is wrong, this should work. Create a plunk and I'll see if I can offer some guidance. — Rob J
– Rob J, Commented Apr 26, 2016 at 20:27
Added a plunkr above to original post. Let me know if you figure anything out. Thanks! — Tyler O
– Tyler O, Commented Apr 28, 2016 at 13:24

Shashank Trivedi · Accepted Answer · 2016-04-26 14:42:05Z

1

First I tried a lot to fix it but then I decided to search in google. I found this link .

Your problem is a known problem and will not be fixed. "uib-tab won't toggle active class if uib-tab index is set to dynamic key". You have to take some different approach like use of '$index'.

answered Apr 26, 2016 at 14:42

Shashank Trivedi

2522 silver badges16 bronze badges

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

Comments

Tyler O · Accepted Answer · 2016-04-29 14:19:51Z

1

After trying out a few more things I realized I made a mistake and did not have to include the brackets for the expression for either binding (active or index).

It just didn't seem like they were being evaluated but they actually are.

Here is the code that should work: activeItemId being a property on the parent controller.

<uib-tabset type="pills" active="activeItemId">
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)"
             index="item.Id">
    </uib-tab>
</uib-tabset>

answered Apr 29, 2016 at 14:19

Tyler O

991 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap tabset with ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related