CODEWITHSUNDEEP
javascriptangularjs
DeseaseSparta
DeseaseSparta

Reputation: 271

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 ?

Upvotes: 0

Views: 1845

Answers (3)

Rajagopal Reddy ip
Rajagopal Reddy ip

Reputation: 11

                   <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

Upvotes: 0

Jax
Jax

Reputation: 1843

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

Upvotes: 1

tommy
tommy

Reputation: 1026

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>

Upvotes: 0

Related Questions