cssangularjsangularjs-ng-repeatng-classangularjs-ng-class

angularjs alternate colouring only for the visible objects in the entire set

In my angularjs application, I have the following json.

   $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 I have simple ng-repeat :

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

Now I need to apply alternative colour using ng-class, to the visible labels only. I mean in the given list only "xyz" and "lmn" are visible on the screen and they should be given alternative colours.

How can I apply ng-class="{even: !($index%2), odd: ($index%2)}", in this case only for the visible labels, similar to below html, but that html should add even or odd classes correctly based on needsToHide flag?

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

  • You can use filter to do this.

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