Question

我的情况是我在表达式的基础上对数据进行排序：

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>

因此，每当用户点击其中一个受欢迎或最新的列表时，将激活所选的类。我怎样才能表达ng-class，以便激活列表中的选定类。这是没有ng-repeat，我可以使用$ index和onselect，我们可以活动类。我怎么能在这里做到这一点？

Answer 1

我不确定您要申请哪个课程，但您可以执行类似

的课程

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

我们在此处为范围创建变量selectedOption，在ng-click上设置它的值并在ng-class表达式中进行检查。

Answer 2

以下是我的代码中条件ng-class属性的示例。

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

因此我认为你的代码应该是这样的：

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

Answer 3

我正在做一些语法错误。我们可以简单地解决这个问题

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

此处 latest_icon 和 popular_icon 是根据所选列表激活的班级名称。

选定元素Angularjs上的ng-class

3 个答案: