DeseaseSparta DeseaseSparta -4 years ago 125
AngularJS Question

Highlight a row if it contains a specific item with Angularjs

I want to highlight the row of a table if this table contains an element that is in a global variable.

Here is a fiddle : http://jsfiddle.net/L60L3gv9/

So

var myVar = "SWITZERLAND"


is the global variable I'm looking in the table.

<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>


And if the table contains it, I want to highlight the row.

Any advices ?

Answer Source

Here is a possible solution:

HTML:

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <th>Column1</th>
  <th>Column2</th> {{myVar}}
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
  </tr>
</table>

CSS:

.red-background {
   background-color: red;
 }

JS:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.myVar = "Switzerland"
  $http.get("http://www.w3schools.com/angular/customers.php")

  .then(function (response) {
    $scope.names = response.data.records;
  });    
});

Note that the server returns countries in lowercase.

Here is a jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download