ng-class中的angularjs表达式语法是什么

Question

所述AngularJS菜鸟手册有一些代码这减少类操纵以一个简单的表达和结合:

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

但是,ng-class中的表达式语法是什么？我知道一个垂直条(|)将通过一个过滤器,并且一个过滤器可以在冒号后传递参数,但上面的代码正在做一些不同的事情.如果右侧的scope变量求值为true,则包含左侧的表达式,否则将其删除.

这是否特定于ng-class指令？http://docs.angularjs.org上有一些文档可以解释这个吗？

Answer 1

在ngClass文档中简要提到了这一点(我认为太简短了).如果将对象传递给ngClass,则如果该键的值为 true ,则它将该对象的每个键作为类应用于该元素.例如:

$scope.first = true
$scope.second = false
$scope.third = true

同

<div ng-class="{a: first, b: second, c: third}"></div>

会导致

<div class="a c"></div>

Answer 2

你可能也看到过这样的东西:

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

非常rad语法.

编辑: 这里发生的是,"complete"class被添加到元素if(item.Id != 0).或者,我们可以写:<div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')].正如它由monsterEatsCookies函数决定的那样,Elmo不会吃饼干,所以因为这个函数返回falsehtml元素获得一个名为的类cookieless.

一个简单的例子:<div ng-class="{false: 'DoubleNegative'}[1 == 0].1 !== 0这是" false" - " DoubleNegative"类被添加到元素中.

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

`

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

附录

此外,我刚刚意识到您可以使用各种不同的键来映射您的情况.例如:

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

该mute如果项目没有"类将被应用于hasValue"属性.此外,您可以为任何给定的类型或值应用类:

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

在以下集合中,这将在隐藏作为对象的项目时强化一个人的名字:

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

有了这个,您可以在任何$ scope属性中查看特定值.我想这有时会非常方便.

干杯

Answer 3

ng-click="flags.open=!flags.open"

将值的值切换flags.open为true或false.
和

ng-class="{active:flags.open}"  

active根据的值决定该类是否存在flags.open.
请参阅演示以上示例的小提琴.