What is the best way to conditionally apply a class?

 

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.

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.

ng-class supports an expression that must evaluate to either

  • A string of space-delimited class names, or
  • An array of class names, or
  • A map/object of class names to boolean values.

    • So, using form 3) we can simply write 

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

    See also How do I conditionally apply CSS styles in AngularJS? for a broader answer.

    Update : Angular 1.1.5 has added support for a ternary operator, so if that construct is more familiar to you: 

    ng-class="($index==selectedIndex) ? 'selected' : ''"

    My favorite method is using the ternary expression. 

    ng-class="condition ? 'trueClass' : 'falseClass'"

    Note: Incase you're using a older version of Angular you should use this instead, 

    ng-class="condition && 'trueClass' || 'falseClass'"
    链接地址: http://www.djcxy.com/p/15476.html

    上一篇: 使用html表格进行布局

    下一篇: 有条件地应用课程的最佳方式是什么？