必承其重 | 欲带皇冠 2011-10-17 10:49 采纳率: 0%
浏览 501
已采纳

有条件地应用类的最佳方法是什么?

Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex. What would be the best way to add a class to the li with the index selectedIndex in AngularJS?

I am currently duplicating (by hand) the li code and adding the class to one of the li tags and using ng-show and ng-hide to show only one li per index.

转载于:https://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class

  • 写回答

22条回答 默认 最新

  • ?yb? 2011-11-29 11:17
    关注

    If you don't want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name selected, no custom directives are necessary:

    ng:class="{true:'selected', false:''}[$index==selectedIndex]"
    

    Please note the old syntax with colon.

    There is also a new better way of applying classes conditionally, like:

    ng-class="{selected: $index==selectedIndex}"
    

    Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.

    However these ways are not functionally equal. Here is an example:

    ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
    

    We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(21条)

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)