How to add condition class in angularjs

Question

if (url.indexOf('master/confirm-account') > 0) {
    $scope.accountInfo = 'Confirm Account';
    $scope.page = 'confirm_account';
    $scope.activeTab = true;
} else if (url.indexOf('master/master-profile') > 0) {
    $scope.accountInfo = 'Confirm Account';
    $scope.page = 'master_profile';
    $scope.activeTab = true;
} else {
    $scope.accountInfo = 'Create Account';
}


<div ng-class = "{'process-step' : true, '({{page}}=='confirm_account') ? 'active-tab' : ' '}" >

How can I add process-step and active-tab class Expected result if condition match then it become like that

https://www.google.es/search?q=ng-class+with+conditional&oq=ng-class+with+conditional&aqs=chrome..69i57j0l5.5456j0j1&sourceid=chrome&ie=UTF-8 — Álvaro Touzón, Jul 26 '17 at 10:45
Possible duplicate of [AngularJS ngClass conditional](https://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional) — Durga, Jul 26 '17 at 10:52

score 1 · Accepted Answer · answered Jul 26 '17 at 10:48

1

The ng-class works like

{'add_this_class' : (if_this_expression_is_true)}

and not in the other way.

try this

<div class="process-step" ng-class="{'active-tab' : (page =='confirm_account') }">

answered Jul 26 '17 at 10:48

invader7

452
1
5
11

score 0 · Answer 2 · answered Jul 26 '17 at 10:55

Seeing to the complexity of your class matching logic you could go for second way of implementing ng-class

** Inside HTML**

<div class="process-step" ng-class="ctrl.getPageBasedClass()">

Inside Controller

var self.getPageBasedClass = function(){

   var yourClassNameAsString = // your logic for class name 
   return yourClassNameAsString;
}

How to add condition class in angularjs

2 Answers2