Angular ng-class directive not working in ng-repeat

Question

Angular ng-class directive not working in ng-repeat

I have this issue where I try to color some of the list items in an ionic list. somearray is an array holding the indices to be colored red. No matter what, this below code is coloring only the first index in the array. Where's the problem?

      <ion-list>
        <ion-item ng-class="{red : !somearray.indexOf($index)}" ng-repeat="todo in todos" class="item" >
              <div>
                <button class="button button-block button-dark" ng-click="addNewForm($index)">
                  {{todo.title}}
                </button>
              </div>
        </ion-item>
      </ion-list>

javascript
angularjs
ionic-framework

Answer 1

indexOf returns -1 if the item cannot be found or the index of the element when it is.

You can check that the return value of indexOf is greater than -1 instead:

{red : somearray.indexOf($index) > -1}

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.todos = [{title: 'a'}, {title:'b'}, {title:'c'}, {title: 'd'}];
  $scope.somearray = [1,2];
});

.red {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
      <ion-list>
        <ion-item ng-class="{red : somearray.indexOf($index) > -1}" ng-repeat="todo in todos" class="item" >
              <div>
                <button class="button button-block button-dark" ng-click="addNewForm($index)">
                  {{todo.title}}
                </button>
                {{$index}}
              </div>
        </ion-item>
      </ion-list>
</div>