angularjs 전체 세트의 보이는 물체에 대해서만 색을 바꿉니다.

Question

내 angularjs 응용 프로그램에는 다음과 같은 json이 있습니다.

<label ng-repeat="eachPosition itemsList track by eachPosition.num" ng-show="!eachPosition.needsToHide"> 
    <span> {{eachPosition.busName}} </span>        
</label> 

지금 난 단지 눈에 보이는 라벨, NG-클래스를 사용하여 다른 색상을 적용 할 필요가 : 내 HTML에서

$scope.itemsList = { 
     "busName": "ABC", 
     "needsToHide": true, 
     "num": 123 

    }, { 
     "busName": "xyz", 
     "needsToHide": false, 
     "num": 567 
    }, { 
     "busName": "pqr", 
     "needsToHide": true, 
     "num": 654 
    }, { 
     "busName": "lmn", 
     "needsToHide": false, 
     "num": 672 
    } 

나는 간단한 NG 반복 있습니다. 주어진 목록에서 "xyz"와 "lmn"만 화면에 표시되고 대체 색상이 주어져야 함을 의미합니다.

이 경우에는 표시 레이블에 대해서만 ng-class="{even: !($index%2), odd: ($index%2)}"을 적용 할 수 있습니까? html은 needsToHide 플래그에 따라 올바르게 짝수 또는 홀수 클래스를 추가해야합니까?

<label ng-repeat="eachPosition itemsList track by eachPosition.num" ng-show="!eachPosition.needsToHide" ng-class="{even: !($index%2), odd: ($index%2)}"> 
     <span> {{eachPosition.busName}} </span>        
    </label> 

Answer 1

filter을 사용하면이 작업을 수행 할 수 있습니다.

예 : jsfiddle.

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function() { 
 
    var vm = this; 
 
    vm.itemsList = [{ 
 
     "busName": "ABC", 
 
     "needsToHide": true, 
 
     "num": 123 
 

 
    }, { 
 
     "busName": "xyz", 
 
     "needsToHide": false, 
 
     "num": 567 
 
    }, { 
 
     "busName": "pqr", 
 
     "needsToHide": true, 
 
     "num": 654 
 
    }, { 
 
     "busName": "lmn", 
 
     "needsToHide": false, 
 
     "num": 672 
 
    }]; 
 
    });

.even { 
 
    color: red; 
 
} 
 
.odd { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div>With <code>ng-class</code> and <code>$even,$odd</code> property. </div> 
 
    <label ng-repeat="eachPosition in vm.itemsList|filter:{needsToHide:false} track by eachPosition.num" ng-class="{even: $even, odd: $odd}"> 
 
     <span> {{eachPosition.busName}} </span> 
 
    </label> 
 
    <div>With <code>ng-class</code> and <code>$index</code> property. </div> 
 
    <label ng-repeat="eachPosition in vm.itemsList|filter:{needsToHide:false} track by eachPosition.num" ng-class="{even: !($index%2), odd: ($index%2)}"> 
 
     <span> {{eachPosition.busName}} </span> 
 
    </label> 
 
    <div>With <code>ng-style</code> and <code>$even,$odd</code> property. </div> 
 
    <label ng-repeat="eachPosition in vm.itemsList|filter:{needsToHide:false} track by eachPosition.num" ng-style="{color: $even?'red':'green'}"> 
 
     <span> {{eachPosition.busName}} </span> 
 
    </label> 
 
    </div> 
 
</div>