2

Como faço pra colorir a linha selecionada em uma table?

Tenho o seguinte código:

 <tr ng-repeat="p in produtos" ng-click="info(p)" 
  ng-class="{'info': ??}">

Só não estou conseguindo encontrar uma condição para colorir somente a linha selecionada.

Alguém tem uma ideia?

2
  • Com linha selecionada você quis dizer a linha em que o mouse está sobre, ou no seu objeto p terá alguma propriedade que dirá isso? Commented 24/02/2016 às 17:37
  • A linha que eu cliquei com o mouse, no caso o angular tem o $index que retorna a posição que está selecionada, gostaria de colorir essa linha.
    – Geferson
    Commented 24/02/2016 às 17:40

2 Respostas 2

2

Uma solução seria você criar uma variável:

$scope.selected = '';

E ao clicar em uma tr atribuir o $index ou id do elemento a esta variável, depois basta verificar qual o valor e aplicar a classe, deste modo:

<tr ng-repeat="p in produtos" ng-click="selected = $index" ng-class="{'info': selected == $index}">

Veja um exemplo funcionando: https://plnkr.co/edit/BALHDT?p=preview

1
  • Perfeito, fiz um pouco diferente, mas funcionou: usei $index === rowSelected no ng-class, e no ng-click setei $scope.rowSelected = index; obrigado pela ajuda.
    – Geferson
    Commented 24/02/2016 às 18:06
1

Se a tua intenção é marcar e desmarcar, uma opção é criar uma variável boleana que será "ligada" ou "desligada" ao clicar.

.azul {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li 
        ng-repeat="x in names" 
        ng-click="selected = !selected" 
        ng-class="{'azul': selected}">
      {{ x }} - {{ $index }}
    </li>
  </ul>
</div>

Dessa maneira poderá se secionar todos os itens ao mesmo tempo, o que depois percebi que não responde a pergunta do AP, porém pode ser útil.

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 .