1

Necessito de uma ajuda com AngularJs (1.6), eu preciso alterar a classe css de apenas um ou mais itens ja renderizados pelo ng-repeat.

Vi em alguns lugares que clicando no item é possível enviar seu $index e assim alterar a classe apenas desse elemento, o que me ajudaria, porém eu necessito que isso seja alterado pela controller, sem passar o $index pela view.

Eu sei qual $index precisa alterar, só preciso saber como alterar ele depois de renderizado sem passar passar nada pela view.

Exemplo, eu tenho isso e quero alterar a classe dinamicamente do 3 (ou 4, 5) item já renderizado.

<ul ng-repeat="item in itens">
    <li>{{item.item}}</li>
    <li>{{item.alterarClasseDesseItem}}</li>
</ul>

1 Resposta 1

3

Tem algumas possíveis soluções:

EXEMPLO 1:
Uma forma usando o "jeito Angular", seria usar o ng-class e alterá-lo dinamicamente, assim:

<li ng-class='classeDinamica' id='li-1'>{{item.item}}</li>

e na controller:

$scope.classeDinamica= 'nome-da-classe';

Mas isso irá alterar todos os elementos com classeDinamica, e pelo que vi não é isso que você quer.

EXEMPLO 2
Para um elemento em especial, você pode usar um seletor, o que não é muito o "jeito angular", mas funciona:

angular.element(document.querySelector('#li-1')).addClass('nome-da-classe')

EXEMPLO 3
Uma outra solução mais elegante no "jeito angular" é usar uma expressão lógica com ng-class usando o elemento ou o próprio objeto que foi feito o binding, no seu exemplo item:

<li ng-class="{'nome-da-classe': item.selecionado == true}" >{{item.item}}</li>

e na controller, já que você sabe qual o elemento (usei o índice x):

$scope.itens[x].selecionado = true;

Isso irá aplicar a classe quando o atributo selecionado do item seja igual a true.

EXEMPLO 4
Por fim, se for somente um item selecionado em vários, e como você disse que tem o $index, você pode criar um valor no $scope pra guardar o elemento selecionado, baseado no $index e fazer como no elemento anterior de um ng-class condicional, assim:

<li ng-class="{'nome-da-classe': $index == itemSelecionado}" >{{item.item}}</li>

e finalmente na controller:

$scope.itemSelecionado= $index;

Alguma dessas soluções deve te ajudar

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .