angularjs and dynamic button-bar with ng-repeat

Question

I'm using angularjs and I want to dynamically define a button-bar. Something like this:

<div class="bar bar-subheader" ng-show="tournament.gameTableCreated">
    <div class="button-bar">
        <div ng-repeat="category in categories | orderBy : 'name' track by $id(category)"
                  type="item-text-wrap">
            <button class="button button-positive" ng-click="showAndHide(category.name)">{{category.name}}</button>
        </div>  
    </div>
</div>

The button bar works fine, but button-bar class is not applied and buttons are not resized according to the screen width.

Plunker added: http://plnkr.co/edit/axML5fG9ht4boLF2tsoV

Any idea how to deal with it?

Thanks in advance

Please add the html output of this template code and css information. — lifeisfoo
– lifeisfoo, Commented Aug 24, 2015 at 22:32
there isn't anything obvious here which would cause that css class to not show; definitely angular isn't at play with a <div class="button-bar"> only. — Claies
– Claies, Commented Aug 24, 2015 at 22:47

Claies · Accepted Answer · 2015-08-24 23:18:51Z

1

the ionic button-bar CSS class only applies it's styling to it's direct descendants; In your code, the ng-repeat div actually wraps your buttons, causing them to not be the direct descendants.

In this case, the <div> is unnecessary, and the <button> can be the element that is repeated.

<div class="button-bar">
    <button ng-repeat="category in categories | orderBy : 'name' track by $id(category)"
            type="item-text-wrap"
            class="button button-positive" 
            ng-click="showAndHide('HEL', showHelp)">{{category.name}}
    </button>
</div>

http://plnkr.co/edit/410vEsA5s4RMIZwEK0Vh?p=preview

answered Aug 24, 2015 at 23:18

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

angularjs and dynamic button-bar with ng-repeat

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