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

By documentation

通过ngClass指令，您可以通过数据绑定表达式来动态设置HTML元素上的CSS类

如果您想通过布尔值更改文本的颜色，则可以通过以下方式使用ng-class：

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

在您的情况下：

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

其中red或black必须是定义的CSS类。

实际上，您有两种不同的过滤数据的方法：

在html内
在控制器内部的功能中

By documentation

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

Angular js如何使用ng-class过滤数据

2 个答案: