Angular JS, как я могу фильтровать данные с помощью NG-класса

Question

В моем Html я дважды отображал "OUI", я думаю, потому что у меня есть две установки по умолчанию (delestage, команда по умолчанию '), как я могу отфильтровать их одну за другой, используя ng-class и 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
                      }

        });

Answer 1

По документации

Директива ngClass позволяет динамически устанавливать классы CSS для элемента HTML путем привязки выражения к данным

Если вы хотите изменить цвет текста на логическое значение, вы можете использовать ng-class в этом случае:

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

в твоем случае:

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

где red или же black должен быть определен класс CSS.

Ведь для фильтрации данных у вас есть два разных метода:

1. Внутри HTML
2. В функции внутри контроллеров

По документации

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

В этом случае благодаря "трубе" вы можете добавить фильтр в ваш код.

Например, 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;
  };
});

Вы также можете отфильтровать ваши данные на контроллере (вы должны добавить в область действия новый отфильтрованный список), а затем добавить внутрь ng-repeat ваш отфильтрованный список.

Answer 2

Если вы хотите изменить цвет динамически, вы можете использовать ngStye.

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

я использовал это:

<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>