Highlight a row if it contains a specific item with Angularjs

Question

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 ?

Try this: http://jsfiddle.net/L60L3gv9/1/ – Rayon Dec 11 '15 at 10:15 — Rayon, Dec 11 '15 at 10:15

Jax · Accepted Answer · 2015-12-11T10:34:41.683

1

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

edited Dec 11 '15 at 10:34

answered Dec 11 '15 at 10:25

Jax

1,839
3
18
30

Can you just make it case insensitive ? – Rayon Dec 11 '15 at 10:26
1

yeah it doesn't matter – DeseaseSparta Dec 11 '15 at 10:26
is there a way to put the css directly in the ng-class attribute ? @Rayon Dabre – DeseaseSparta Dec 11 '15 at 10:27
@DeseaseSparta http://stackoverflow.com/questions/21364445/apply-css-style-attribute-dynamically-in-angular-js – Rayon Dec 11 '15 at 10:29
1

Thanks @Rayon Dabre, and Jax : very helpful. You should have made an answer Rayon :/ – DeseaseSparta Dec 11 '15 at 10:38
DeseaseSparta by using ngStyle you loose control over what part in your HTML gets highlighted when desired condition is met, also I would recommend having your css away from your html. – Jax Dec 11 '15 at 10:38
Hey mates, sorry to disturb you but can you explain this behaviour when I'm going bootstrap css ? http://jsfiddle.net/L60L3gv9/9/ – DeseaseSparta Dec 11 '15 at 12:46

tommy · Answer 2 · 2015-12-11T10:29:32.210

First, define a class which highlight the row:

tr.highlight {
  background-color:#123456;
}

Then you should define a constant and inject it into the controller:

var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is

var app = angular.module('myApp', []);

app
    .constant('myVar', myVar)
    .controller('customersCtrl', function($filter, $scope, $http, myVar) {
        $scope.myVar = myVar;
        $http.get("http://www.w3schools.com/angular/customers.php")
            .then(function(response) {
                $scope.names = response.data.records.map(function(item) {
                    item.Country = $filter('uppercase')(item.Country);
                    return item;
                });
            });
    });

Last, use the directive ng-class in the view:

<div ng-app="myApp" ng-controller="customersCtrl">
    <table>
        <th>Column1</th>
        <th>Column2</th>
        <tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
        </tr>
    </table>
</div>

'SWITZERLAND' === 'Switzerland' will return false I suppose! — Rayon, Dec 11 '15 at 10:27
Ooh...my bad..Any other approach to avoid loops in the controller will be appreciated! — Rayon, Dec 11 '15 at 10:32

score 0 · Answer 3 · answered Feb 28 '17 at 09:23

                   <tr>
                    <th>Sr. No.</th>
                    <th>Menu Name</th>
                    <th>Child Menu</th>
                  </tr>

               <tr ng-repeat="menus in menuList" >
                <td >{{$index+1}}</td>
                <td >{{menus.menu}}</td>
               <td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
                  <a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
               </td>
               <td ng-if="!menus.menu_items"></td>

            </tr>
            </tbody>

I have understand clearly u r question ,if any row have any any child data or rows need to highlight image or any one. Here i used image by using boostrap This is working perfectly check once

Highlight a row if it contains a specific item with Angularjs

3 Answers3