ng-class on selected element Angularjs

Question

I have a situation where i am sorting data on the basis of expression:

html :

 <ul>
  <li ng-click="expression = 'created_at'" ng-class="latest_icon: 'selected'" >latest post</li>
  <li ng-click="expression = 'popularity'" ng-class="popular_post: 'selected'" >popular post</li>
 </ul>

<div ng-repeat = "data in posts | orderBy::expression:true">
  //showing data
</div>

So whenever user click on one of the list wheather it is popular or latest ,selected class will be activated. How could i give expression to ng-class so that selected class on list get activated. this is without ng-repeat where i can use $index and onselect we can active class. how can i do this here?

Answer 1

I was doing some syntax error. We can simply resolve this

<ul>
  <li ng-click="expression= 'created_at'" ng-class= "latest_icon : expression == 'created_at'">Latest </li>  
  <li ng-click="expression= 'popularity'" ng-class= "popular_icon : expression == 'popularity'">Latest </li>  
</ul>

Here latest_icon and popular_icon are classes name which activate according to selected list.

Answer 2

I am not sure which class you want to apply but you can do something like

<ul>
  <li ng-click="expression = 'created_at';selectedOption='latest'" ng-class="{latest_icon:true, 'selected':selectedOption=='latest'}" >latest post</li>
  <li ng-click="expression = 'popularity';selectedOption='popular'" ng-class="{popular_post:true, 'selected':selectedOption=='popular'}" >popular post</li>
 </ul>

Here we create a variable selectedOption on the scope, set it's value on ng-click and check it in ng-class expression.

Answer 3

Here is an example of a conditional ng-class attribute from my code.

div(ng-class="{'fixed':isFixed}")

So from this I reckon your code should look something like this:

 <ul>
  <li ng-click="expression = 'created_at'" class="created_at" ng-class="'selected' : expression=='created_at'" >latest post</li>
  <li ng-click="expression = 'popularity'" class="popular_post" ng-class="'selected' : expression=='popularity'" >popular post</li>
 </ul>