在ng-class中，这是什么angularjs表达式语法

The AngularJS Noob Handbook has some code which reduces class manipulation to a simple expression and binding :

AngularJS Noob手册中有一些代码可以将类操作简化为简单的表达式和绑定:

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

However, what is the expression syntax in ng-class? I understand that a vertical bar (|) would pass through a filter and that a filter can be passed parameters after a colon but the above code is doing something different. If the scope variable on the right evaluates to true then the expression on the left is included otherwise it's dropped.

但是，ng类中的表达式语法是什么?我理解垂直条(|)将通过过滤器，过滤器可以在冒号之后传递参数，但是上面的代码做了一些不同的事情。如果右边的作用域变量计算为true，那么左边的表达式将被包含，否则将被删除。

Is this specific to the ng-class directive? Is there some documentation on http://docs.angularjs.org that explains this?

这是针对ng-class指令的吗?是否有一些关于http://docs.angularjs.org的文档说明了这一点?

5 个解决方案

#1

This is mentioned briefly (too briefly, in my opinion) in the ngClass documentation. If you pass an object to ngClass, then it will apply each key of the object as a class to the element if that key's value is true. For example:

在ngClass文档中简要地(在我看来过于简短)提到了这一点。如果您将一个对象传递给ngClass，那么它将把对象的每个键作为类应用到元素中，如果该键的值为true。例如:

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

with

与

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

would result in

会导致

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

#2

you've probably also seen something like this:

你们可能也见过这样的东西:

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

Very rad syntax.

rad的语法。

EDIT: What happens here, is that the "complete" class is added to the element if(item.Id != 0). Alternatively, we could write: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]. As its decided by the monsterEatsCookies function, Elmo does not eat cookies so since this function returns false the html element gains a class called cookieless.

编辑:这里发生的是，“complete”类被添加到元素if(item)中。或者，我们可以这样写:

A simple example: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0 which is "false" -- the "DoubleNegative" class is added to the element.

一个简单的例子:

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

”

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

Addendum

齿顶高

Also, I just realized that you can use a variety of different keys to map to your condition. For example:

而且，我刚刚意识到你可以使用各种不同的键来映射你的情况。例如:

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

ng-class="{true: 'highlight'， undefined: 'mute'}[项。hasValue]”

The mute class will be applied if item has no "hasValue" property. Furthermore, you can apply a class for any given type or value:

如果项目没有“hasValue”属性，则将应用静音类。此外，您可以为任何给定类型或值应用类:

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

{'Jonathan Chapman': ' den'， '[object]': 'hide'}[item.toString()]

In the following collection, this would embolden a person's name while hiding items that are objects:

在下面的集合中，这将使一个人的名字更有胆量，同时隐藏作为对象的项目:

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

With this, you could watch for specific values in any $scope property. I suppose this could come in very handy at times.

有了这个，您可以在任何$scope属性中观察特定值。我想这有时会很有用。

Cheers

干杯

#3

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

switch the value of the flags.open to true or false.
And

切换标志的值。向真或假开放。和

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

decides whether the class active is present or not based on the value of flags.open.
Please see the Fiddle demonstrating the above example.

根据flag的值决定类是否存在。请参看演示上述例子的小提琴。

#4

Here's how you can pass expression with filter:

下面是如何通过过滤器传递表达式:

 <div ng-class="{ 'customer-page': ('customer' | isRoute), 
  'orders-page': ('orders' | isRoute)  }">....</div>

#5

like this example below :

如下例所示:

div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")

#1

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