Angular js how can I filter data using ng-class

Question

In my Html I displayed two times "OUI" I think because I have two default installations (delestage, default command') how can I filter them one by one using ng-class and ng-repeat.

 <div  ng-repeat="value in installationsHelper" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
                    <div ng-repeat="value1 in value.InstallationDefautsTypes.value | filter :  'D'">{{value.InstallationDefautsTypes.value}}
                        <span ng-class="value1 ? 'mDefault' : 'mDanger'">
                            OUI
                        </span>

    <script>
     angular.module('myApp', []).controller('myController', function($scope) {      
 $scope.installationsStates = [
                {
                    Installations: {
                        id: 1
                    },
                    InstallationsDefautsTypes : {
                       Delestage:
                     {
                        name: "Delestage", 
                        value : false, 
                        id: 1}
                     defaut command:
                        {
                        name: "Delestage", 
                        value : false, 
                        id: 1
                     }
                      }
                    },
                    defaultsInstallations: {
                        0:"defaut",
                        1:"Delestage"
                    }
                },
                {
                    Installations: {
                        id: 2
                    },
                    InstallationsDefautsTypes : {
                     Delestage:{
                        name: "Delestage", 
                        value : false, 
                        id: 1
                      }

        });

i need to filter color text by boolean and i have to defaults — hakim
– hakim, Commented Jul 24, 2018 at 12:02
Make your question more clear that what you want to show or what do you mean by filter? — Ans Bilal
– Ans Bilal, Commented Jul 24, 2018 at 12:04

carmelolg · Accepted Answer · 2018-07-24 12:24:06Z

4

By documentation

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression

If you want change color of the text by a boolean you can use ng-class in this way:

<any class="ng-class: expression;"> ... </any>

in your case:

<span ng-class = "ng-class="value.InstallationsDefautsTypes.value ? 'red' : 'black'">
                OUI
            </span>

where red or black have to be defined css class.

Indeed for filtering data you have two different method:

Inside the html
In a function inside controllers

By documentation

{{ expression [| filter_name[:parameter_value] ... ] }}

In this case thanks to the "pipe" you can add a filter in your code.

E.g. HTML:

<ul>
  <li ng-repeat="friend in person.friends | startsWithA">
    {{ friend }}
  </li>
</ul>

JS:

app.filter('startsWithA', function () {
  return function (items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (/a/i.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

You can also filter your data on controller (you must add to the scope a new filtered list) and then add inside ng-repeat your filtered list.

edited Jul 24, 2018 at 12:24

answered Jul 24, 2018 at 12:13

carmelolg

5035 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hakim Over a year ago

How you can do that inside html please

carmelolg Over a year ago

the filter or the ng-class?

carmelolg Over a year ago

@hakim don't edit my answer with your code, at most add a comment.

hakim · Accepted Answer · 2018-07-24 12:20:09Z

0

If you want to change color dynamically, you can use ngStye.

 <span [ngStyle]="{'color': value.InstallationsDefautsTypes.value ? 'red' : 'black'}"> 
       OUI
  </span>

i used this :

<div  ng-repeat="value in installationsHelper" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">

                        <span ng-class="value.InstallationsDefautsTypes.value ? 'mDefault' : 'mDanger'">
                            OUI
                        </span>

                </div>

edited Jul 24, 2018 at 12:20

hakim

134 bronze badges

answered Jul 24, 2018 at 12:08

Bhanu Tej P

2301 silver badge5 bronze badges

11 Comments

hakim Over a year ago

i changed the Json you can see now please

hakim Over a year ago

i want to filter InstallationsDefautsTypes , how i can filter a installationsDefautsTypes please

carmelolg Over a year ago

be careful, this code it could be works on angular2+ not in angularjs.

hakim Over a year ago

yes but how i can filter the installationsDefautsTypes can you help me please

carmelolg Over a year ago

are you able to create a function on a controller?

|

Collectives™ on Stack Overflow

Angular js how can I filter data using ng-class

2 Answers 2

3 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related