CODEWITHSUNDEEP
angularjs
Marc
Marc

Reputation: 3

angularjs and dynamic button-bar with ng-repeat

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

Upvotes: 0

Views: 696

Answers (1)

Claies
Claies

Reputation: 22323

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

Upvotes: 1

Related Questions