using numerous if statements in ng-class

Question

using numerous if statements in ng-class

In my AngularJS application, I have a piece of code that I'm using in a table. I want to apply the 'rare' class only to rows with an index of 0, 1, or 2. In other words, I want to highlight the first three rows differently from the rest.

Currently, I have the following code snippet:

ng-class="{rare : $index === 0, rare : $index === 1, rare : $index === 2}"

However, I'm wondering if there is a simpler or more concise way to achieve this. Is my current solution considered good practice? Although it works, I find the syntax a bit cumbersome. How would you approach writing the conditional checks in a clearer manner?

I attempted the following alternative:

ng-class="{rare : $index === {0,1,2}}

, but unfortunately, it did not work as expected.

javascript angularjs if-statement ng-class

Answer 1

Answer №1

To handle a list of values, you can utilize the following approach.

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

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.data = "Test";
    $scope.rareList = [1, 2, 3];
    $scope.val1 = 2;
    $scope.val2 = 5;
  }
]);

.active {
  color: red;
}
.not-active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-class="rareList.includes(val1)? 'active' : 'not-active'">{{data}}</div>
    <div ng-class="rareList.includes(val2)? 'active' : 'not-active'">{{data}}</div>
  </div>
</div>

Answer 2

To handle a list of values, you can utilize the following approach.

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

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.data = "Test";
    $scope.rareList = [1, 2, 3];
    $scope.val1 = 2;
    $scope.val2 = 5;
  }
]);

.active {
  color: red;
}
.not-active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-class="rareList.includes(val1)? 'active' : 'not-active'">{{data}}</div>
    <div ng-class="rareList.includes(val2)? 'active' : 'not-active'">{{data}}</div>
  </div>
</div>

Answer 3

Answer №2

It seems like a common mistake to overlook the fact that $index, as the row index, always starts at 0 and then increments. Therefore, you can ignore the lower limit and simply check if the index is less than the upper limit (remember that $index is zero-indexed unless explicitly set otherwise, so checking if it's less than three will include row indexes 0, 1, and 2).

ng-class="{rare: $index < 3}"

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

    app.controller("sampleController", ["$scope",
      function($scope) {
        $scope.data = ['test1','test2','test3','test4'];
      }
    ]);

.rare {
    color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <div ng-app="sampleApp">
      <div ng-controller="sampleController">
        <div ng-class="{rare: $index < 3}" ng-repeat="datum in data">{{datum}} ($index = {{$index}})</div>

      </div>
    </div>

Answer 4

It seems like a common mistake to overlook the fact that $index, as the row index, always starts at 0 and then increments. Therefore, you can ignore the lower limit and simply check if the index is less than the upper limit (remember that $index is zero-indexed unless explicitly set otherwise, so checking if it's less than three will include row indexes 0, 1, and 2).

ng-class="{rare: $index < 3}"

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

    app.controller("sampleController", ["$scope",
      function($scope) {
        $scope.data = ['test1','test2','test3','test4'];
      }
    ]);

.rare {
    color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <div ng-app="sampleApp">
      <div ng-controller="sampleController">
        <div ng-class="{rare: $index < 3}" ng-repeat="datum in data">{{datum}} ($index = {{$index}})</div>

      </div>
    </div>

Answer 5

Answer №3

Consideration:

ng-class="{special : [0,1,2].indexOf($index) >= 0}}

Answer 6

Consideration:

ng-class="{special : [0,1,2].indexOf($index) >= 0}}

using numerous if statements in ng-class

Answer №1

Answer №2

Answer №3

Similar questions

When trying to access the DOM from another module in nwjs, it appears to be empty

Mentioning Nodejs' process.argv unexpectedly triggers errors when reading a file

Angular Persistent States in Angular version 2 and beyond

Module Express - Transferring Object to Main Application

Ways to ensure a button is ready to be clicked

Parsing JSON stored in local storage and converting it to a Fabric JS object - JSON generated from form inputs

The conversion of a 2D json array into a string is mistakenly performed

The dynamic form is programmed to display identical values for both the initial and subsequent inputs

Detecting a Checkbox Click Event in JavaScript

Issue with a variable within an *.ejs file

Material User Interface, MUI, Modal, Back to Top Scroll按钮

Getting access to the useState values within the getServerSideProps function in NextJS

What is the proper method for incorporating a Greater-than symbol within a jsx tag?

Place a cookie on the alternate language domain

Having trouble making an ajax request using Cordova?

Sign-in options displayed in a drop-down menu

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

Steps for disabling and collapsing an individual header on the JQuery Accordian

Enhancing website security using Content Security Policy in conjunction with Google Closure

Retrieving the value of a radio button using jQuery and Ajax