Search code examples
angularjsangularjs-directiveng-class

ng-class on selected element Angularjs


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?


Solution

  • 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.