CODEWITHSUNDEEP
angularjs
chichi
chichi

Reputation: 213

Angular change color on table row

I have an AngularJs table

<tr ng-repeat="data in blankettInfoData">
   <td>{{data.informationstyp}}</td>
   <td>{{data.rubricering}}</td>
   <td>{{data.dokumenttyp}}</td>
   <td><input type="checkbox" ng-model="data.checked"/></td>
</tr>

Now I want to change the color of one row when this happens:

  1. When I add a new row to the list (Green color). Code should be something like this: "If (data.informationstyp == 'ABC123') then change color to green"
  2. When I check the checkbox (Red color). Code should be something like this: if (checkbox is checked) then change color to red".

Please help me

Upvotes: 0

Views: 4234

Answers (1)

Vivz
Vivz

Reputation: 6620

You can use angular directive ng-class for this

HTML:

<tr ng-repeat="data in blankettInfoData" ng-class="{'green': data.informationstyp == 'ABC123', 'red': data.checked == true}">
   <td>{{data.informationstyp}}</td>
   <td>{{data.rubricering}}</td>
   <td>{{data.dokumenttyp}}</td>
   <td><input type="checkbox" ng-model="data.checked"/></td>
</tr>

CSS:

.red{
color:red;
}
.green{
color:green;
}

Upvotes: 1

Related Questions