CODEWITHSUNDEEP
angularjsng-class
oussama.tn
oussama.tn

Reputation: 299

angularjs ng-class: Highlight based on selected option

I'd like to know if it's possible to highlight elements based on selected option (from <select> menu).

For example: If I choose to order elements by name from the select menu, names become highlighted. Else if I choose to order by age: only age becomes highlighted.

PS: I used a checkbox to text highlight class and it works fine.

Here is the full code on plunkr

<style>

.highlight {
    font-weight: bold;
    background-color: yellow;
}

</style>

<div ng-controller="SimpleController">

    Column: 
    <select ng-model="filterColumn">
        <option value="name">Name</option>
        <option value="age">Age</option>
    </select>

    Order : 
    <select ng-model="filterOrder">
        <option value="+">- to +</option>
        <option value="-">+ to -</option>
    </select>

    <br>
        <label> <input type="checkbox" ng-model="important">
       important (apply "important/bold" class)
        </label>
    <br>

    <ul>
        <li ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
                <span ng-class="{highlight: important}">{{user.name}}</span> <span>{{user.age}}</span>  
        </li>         
    </ul>

Thanks!

Upvotes: 1

Views: 2657

Answers (1)

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22041

Sure you can. Checkout working snippet below.

ng-class attribute for code responsible for rendering list were updated.

angular
.module('myApp', [])

// controller here
.controller('SimpleController', function($scope){
    $scope.users=[
        {
          "name": "James Doe",
          "age" : 16
        },
        {
          "name": "John Doe",
          "age" : 20
        },
        {
          "name": "Brian Jackson",
          "age" : 15
        },
        {
          "name": "Samuel Doe",
          "age" : 40
        },
        {
          "name": "Adam Brian",
          "age" : 18
        }
      ];
  });
.highlight { background: red;}
<!doctype html>
<html lang="fr" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>HTML5</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  
	<div ng-controller="SimpleController">

    Column: 
    <select ng-model="filterColumn">
        <option value="name">Name</option>
        <option value="age">Age</option>
    </select>

    Order : 
    <select ng-model="filterOrder">
        <option value="+">- to +</option>
        <option value="-">+ to -</option>
    </select>

    <br>
        <label> <input type="checkbox" ng-model="important">
       important (apply "important/bold" class)
        </label>
    <br>

    <ul>
        <li ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
                <span ng-class="filterColumn=='name' ? 'highlight' : ''">{{user.name}}</span> <span ng-class="filterColumn=='age' ? 'highlight' : ''">{{user.age}}</span>  
        </li>         
    </ul>

  </div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</body>
</html>

Upvotes: 1

Related Questions