How do I compare with a string in ng-class?

angularjs ng-class
orbitory picture orbitory · Aug 7, 2014 · Viewed 18k times · Source

This line doesn't seem to work for me. 

Sort By: <a href="" ng-click="setOrder('title')" ng-class="{active: orderProp == 'title'}">Alphabetical</a>

Do I have to escape 'title' in orderProp == 'title' somehow?

in the controller I have

...
$scope.orderProp = 'title';
$scope.setOrder = function(sortBy){
            $scope.orderProp = sortBy;
}
...

Thank you

Update: Using v1.3.0-beta.17

Adding ng-class="{active:orderProp=='pagetitle'} to 

<a href="" ng-click="setOrder('pagetitle')" ng-class="{active:orderProp=='pagetitle'}">Alphabetical</a>

throws an error 

"Error: [$parse:syntax] http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bactive%3AorderProp%3D%3D&p4=%7Bactive%3AorderProp%3D%3D

Sorry for the way I present the error but I just started angular last week and don't know a better way

Update 2: error seems to be coming from = == ===. I tried > and no error occured. Is there an alternative syntax to like eq?

Update 3 with solve

I mapped each string to an int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1};" Inside the controller I just do if pagetitle set active:orderPropIdx to 1 and so on

Maybe this is a bug in angular 1.3

Answer

Noppey picture Noppey · Jan 23, 2015

As is stated in the comments, your class name should be surrounded by single quotes.

ng-class="{'active': orderProp == 'title'}">

This comparison is case sensitive.

Related questions

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way: <div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> I'm wondering if I can use the if-else expression to do something similar to …

Read More
Adding multiple class using ng-class

Can we have multiple expression to add multiple ng-class ? for eg. <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> If yes can anyone put up the example to do so. .

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More