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

google.es/…

Álvaro Touzón
– Álvaro Touzón

2017-07-26 10:45:11 +00:00
Commented Jul 26, 2017 at 10:45 — Álvaro Touzón
– Álvaro Touzón, Commented Jul 26, 2017 at 10:45
Possible duplicate of AngularJS ngClass conditional

Durga
– Durga

2017-07-26 10:52:01 +00:00
Commented Jul 26, 2017 at 10:52 — Durga
– Durga, Commented Jul 26, 2017 at 10:52

invader7 · Accepted Answer · 2017-07-26 10:48:03Z

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, 2017 at 10:48

invader7

5021 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jins Peter · Accepted Answer · 2017-07-26 10:55:40Z

0

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;
}

answered Jul 26, 2017 at 10:55

Jins Peter

2,4891 gold badge22 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to add condition class in angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related