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

Posted 2023-02-23

【中文标题】ng-class 中的 angularjs 表达式语法是啥

【英文标题】：What angularjs expression syntax is this in ng-classng-class 中的 angularjs 表达式语法是什么

【发布时间】：2013-01-22 00:23:39

【问题描述】：

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

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

但是，ng-class 中的表达式语法是什么？我知道竖线 (|) 将通过过滤器，并且过滤器可以在冒号后传递参数，但上面的代码正在做一些不同的事情。如果右侧的范围变量计算结果为 true，则包含左侧的表达式，否则将其删除。

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

【问题讨论】：

特定于 ng-class。另见***.com/a/12151555/215945

【参考方案1】：

ngClass documentation 中简要提到了这一点（我认为太简单了）。如果您将一个对象传递给ngClass，那么如果该键的值 为真，它将将该对象的每个键 作为一个类应用于元素。例如：

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

与

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

会导致

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

【讨论】：

(facepalm) 啊...我现在在文档中看到它 - “类名到布尔值的映射。”这真的不明显，但我也应该扫描到 cmets。感谢 Brandon 和 @Mark - 我在 *** 中看到你们很多订阅了 AngularJS 标签，你们都得到了一流的帮助。

记住 - 如果你的类名包含连字符，你必须在它周围加上引号！如<div ng-class="'a-1': first, 'last-item': second"></div>

【参考方案2】：

你可能也见过这样的东西：

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

非常优雅的语法。

编辑： 这里发生的是“complete”class 被添加到元素if(item.Id != 0)。或者，我们可以写：<div ng-class="false: 'cookieless'[monsterEatsCookies('Elmo')]。由于它由 monsterEatsCookies 函数决定，Elmo 不吃饼干，因此由于该函数返回 false，html 元素获得了一个名为 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 ]"

如果项目没有“hasValue”属性，则将应用 mute 类。此外，您可以为任何给定的类型或值应用一个类：

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

在以下集合中，这会在隐藏作为对象的项目时增加人名：

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

有了这个，你可以观察任何 $scope 属性中的特定值。我想这有时会派上用场。

干杯

【讨论】：

如果您能为我和其他未来的读者解释该语法的作用以及原因，那就太好了。

那么，对象/地图后面的括号表达式是条件吗？该语法实际上是否记录在任何地方？谢谢！

实际上，我无法找到任何关于此的文档，但我可以保证它有效。一位同事把我带到了这里，它完全为我们节省了大量使用 jQuery 元素选择器的工作。我们需要的一切都是数据绑定的。

ng-class 中是否可以有多个条件。我正在寻找一个具有不同 css 待处理的项目的样式。这可能吗？我试过 true: 'complete' [item.Id == 0] , true: 'failed' [item.Id == 1] 但它不起作用

感谢您的解释！这节省了很多时间。

【参考方案3】：

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

将flags.open 的值切换为真或假。 还有

ng-class="active:flags.open"  

根据flags.open 的值确定类active 是否存在。 请参阅Fiddle 演示上述示例。

【参考方案4】：

像下面这个例子：

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

【参考方案5】：

以下是使用过滤器传递表达式的方法：

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