У меня есть список блоков, которые нарисованы внутри ng-repeat. Я использую сетку BootStrap, чтобы установить ширину каждого блока. Я хочу расширить блок при нажатии. По умолчанию блоки отрисовываются с использованием col-lg-2. Идея состоит в том, чтобы использовать col-lg-12 после события click (ng-click).

Кто-нибудь знает, как я применяю этот стиль к каждому блоку индивидуально, используя директивы ng-class или ng-style?

Спасибо.

-1
Rogério Oliveira 24 Апр 2017 в 22:04

2 ответа

Лучший ответ

Это довольно легко, используя комбинацию встроенных директив ng-click и ng-class:

<my-block ng-class="{'col-lg-12': item.clicked, 'col-lg-2': !item.clicked}" 
  ng-click="clickMe(item)"></my-block>

Затем в вашем контроллере вы бы сделали функцию видимости:

$scope.clickMe = function(item) {
  item.clicked = !item.clicked;
};
1
Pop-A-Stash 24 Апр 2017 в 19:28

Я предполагаю, что у вас есть массив объектов. Затем вы можете добавить дополнительное свойство в ваши объекты, называя его className в массиве. Установите его по умолчанию col-lg-2. В функции ng-click вы можете изменить значение свойства на col-lg-12, которое будет действовать индивидуально. Вам нужно использовать это свойство с ng-class, чтобы изменить класс.

0
Turgay Gülmez 24 Апр 2017 в 19:12
43595887