JSFiddle - React, Tailwind, and code Playground
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>
</div>
CSS
table, th , td {
border: 1px solid green;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: green;
}
table tr:nth-child(even) {
background-color: green;
}
.red-background {
background-color: red;
}
JavaScript
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myVar = "Switzerland"
$http.get("http://www.w3schools.com/angular/customers1.php")
.then(function (response) {
$scope.names = response.data.records;
});
});