What Is Best Way To Use Multiple Or Nested Ternary Operator With Ng-class?

May be someone very good at catching the issue, but couldn't able to find what is the issue with my nested ternary operator. .class1 {background-color: red} .class2 {background-col

Solution 1:

Below are the syntax of ng-class with two class one and two.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.one = 2;
});

.one {
  color: red;
}

.two {
  color: green;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script><divng-app="myApp"ng-controller="myCtrl"><divng-class="{one: (one === 1), two: (one === 2)}">
   Helllo
</div>

Solution 2:

I never used angularJs but according to docs, it should be like this.

<png-class = "{ 'class1': (notPaid || orderCancelled), 'class2': (paid && shippingInProgress),
                   'class3': (paid && deliverd)}" ></p><!--- if you don't want a clean solution here is your working code. --><png-class = "(notPaid || orderCancelled) ? 'class1' : 
                   (paid && shippingInProgress) ? 'class2' : 
                   (paid && deliverd) ? 'class3' : ''" ></p>