Angular js:使用ng-class过滤数据

时间:2018-07-24 06:14:33

标签: asp.net angularjs

我无法过滤MyJson数据“ InstallationsDefaultTypes”,请问一个想法。我如何过滤我的嵌套JSON 我只是使用ng-class进行过滤?

角度控制器:

  $scope.GetDefaultByInstallation = function ()
     {
         $scope.installationsStates = [];
         Object.keys($scope.installationsHelper).forEach(function (key)
         {
             var res = false;
             angular.forEach($scope.installationsHelper[key].InstallationsDefautsTypes, function (value, key)
             {
                 if (value.value == true)
                 {
                     res = true;
                 } 
             });
             $scope.installationsStates.push({
                 name: $scope.installationsHelper[key].InstallationsDefautsTypes.name,
                 state: res
             });
         });

     }

page.chtml:这是我的页面html

   <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 stateDefaut">
        <div class="row  col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
            <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 | filter : value.InstallationsDefautsTypes.name = "Delestage"  ? 'mDefault' : 'mActive'}">
                        OUI
                    </span>
                </div>
            </div>
        </div> 

JSON:

scope.installationsStates = [ {
                        Installations: {
                            id: 1
                        },
                        InstallationsDefautsTypes :
                     {
                         Delestage:
                         {
                            name: "Delestage", 
                            value : false, 
                            id: 1
                         }
                       defaut command:
                            {
                            name: "defaut1", 
                            value : false, 
                            id: 1
                         }
                       }

                       defaultsInstallations: {
                            0: "defaut",
                            1:Delestage
                        }
                    }]

1 个答案:

答案 0 :(得分:0)

As per my understanding I made following example as per assumptions

    <html ng-app="myApp">
    <head>
        <title></title>     
    </head>
    <body>

        <div ng-controller="myController">
            <div ng-repeat="value in installationsStates">
                <span style="color: {{ value.InstallationsDefautsTypes.value ? 'red' : 'black' }};">
                    OUI
                </span>
            </div>
        </div>

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

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

For better understanding about ng-repeat etc. please go though this link https://www.w3schools.com/angular/ng_ng-repeat.asp

Hope it helps