Colorize Selected Line Angular JS and Bootstrap

Asked

Viewed 901 times

2

How do I color the selected line in a table?

I have the following code:

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

I’m just not able to find a condition to color only the selected line.

Someone has an idea?

angularjs bootstrap-3

  • With selected row you meant the line on which the mouse is over, or on your object p will have some property that will say that?

  • The line I clicked with the mouse, in case the angular has the $index that returns the position that is selected, I would like to color that line.

2 answers

2


A solution would be you create a variable:

$scope.selected = '';

And when you click on a tr assign the $index or id of the element to this variable, then just check which value and apply the class, this way:

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

See an example working: https://plnkr.co/edit/BALHDT?p=preview

  • Perfect, I did a little different, but it worked: I used $index === rowSelected in ng-class, and ng-click set $Scope.rowSelected = index; thanks for the help.

1

If your intention is to mark and uncheck, one option is to create a variable boleana which will be "on" or "off" when clicking.

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

This way you can secede all the items at the same time, which then I realized that it doesn’t answer the AP question, but it might be useful.

Browser other questions tagged angularjs bootstrap-3

You are not signed in. Login or sign up in order to post.