Within my angularjs application, I am working with the following JSON data:
$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
}
In my HTML template, I have a straightforward ng-repeat loop:
<label ng-repeat="eachPosition itemsList track by eachPosition.num" ng-show="!eachPosition.needsToHide">
<span> {{eachPosition.busName}} </span>
</label>
Now, my goal is to add alternating colors using ng-class to only the visible labels. Specifically, I want to apply the ng-class="{even: !($index%2), odd: ($index%2)}" to the visible labels "xyz" and "lmn" in the list. How can I achieve this within the HTML code provided below?
<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>