The ng-class directive in Angular is failing to function properly within the ng-repeat loop

Question

The ng-class directive in Angular is failing to function properly within the ng-repeat loop

I am facing an issue where I am attempting to color some of the items in a list using Ionic framework. The array named somearray contains the indices that need to be colored red. However, no matter what I do, only the first index in the array is being colored. Can you help me identify the problem in the code below?


  <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

Answer №1

indexOf function will return -1 if the specified item is not found in the array, otherwise it will return the index of the element.

To ensure that the return value of indexOf is valid, you can check if it is greater than -1:

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

Answer 2

indexOf function will return -1 if the specified item is not found in the array, otherwise it will return the index of the element.

To ensure that the return value of indexOf is valid, you can check if it is greater than -1:

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

The ng-class directive in Angular is failing to function properly within the ng-repeat loop

Answer №1

Similar questions

"Exploring the Angular 3 router's wildcard route matching feature

Generating a fresh instance from a pre-existing object using JavaScript

The Stripe technique appears to not be classified as a Function type

What is the response of Express when it encounters numerous identical asynchronous requests from the same origin?

Tips for maintaining accessibility to data while concealing input information

Do you know the location of the .bowerrc file in an Angular app generated by Yeoman?

Error Encountered in Next.js: PDFtron Webviewer - Troubleshooting

The jQuery datetimepicker fails to reflect changes made to the minDate property

The jQuery progress bar vanishes once .load() is employed

The error message "the property '_env_' is not found on the type 'Window & typeof globalThis - React / Typescript ERROR" indicates that the specified property is not present in the

Using jQuery to import an external script into a React JS project

What is the best way to dynamically validate the fields and generate an array?

Vue router is unable to verify the user's authentication

Guidelines for indicating whether a date string is in UTC or local time

What is the best way to apply changes to every class in JavaScript?

What is the best way to incorporate a Thymeleaf message stored in message.properties into my JavaScript file?

Tips on resetting v-model after changing select options

IE9 encounters an error when using jQuery's .remove() function

The functionality of onClick and console.log seems to be malfunctioning on Nextjs

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?