angularjs и динамическая панель кнопок с ng-repeat

0

Я использую angularjs и я хочу динамически определить кнопку-бар. Что-то вроде этого:

<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>

Строка кнопок работает нормально, но класс кнопки не применяется, а кнопки не изменяются в соответствии с шириной экрана.

Плункер добавил: http://plnkr.co/edit/axML5fG9ht4boLF2tsoV

Есть идеи, как с этим бороться?

заранее спасибо

  • 0
    Ваш код JS поможет.
  • 0
    Пожалуйста, добавьте вывод html кода этого шаблона и информацию о css.
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

ионный button-bar CSS-класс применяется только к стилированию его прямых потомков; В вашем коде ng-repeat div фактически обертывает ваши кнопки, заставляя их не быть прямыми потомками.

В этом случае <div> не требуется, а <button> может быть повторением элемента.

<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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню