Question

我在一本书中看到了以下ng-class =“expression”的例子。 http://plnkr.co/edit/fJGT5L9HZXvgAiAyXwlW?p=preview

ng-class="{error:isError,warning:isWarning}"

我得到了控制器逻辑，但我怀疑是在这里发生的插值。

以下情况意味着什么（评估值是多少）和为什么？

ng-class =“{error：true，warning：true}”
纳克级= “{错误：真，警告：假}”
纳克级= “{错误：假，警告：真}”
纳克级= “{错误：假，警告：假}”

Answer 1

ng-class =“{error：true，warning：true}” =＆gt; class =“错误警告”
ng-class =“{error：true，warning：false}” =＆gt; class =“error”
ng-class =“{error：false，warning：true}” =＆gt; class =“warning”
ng-class =“{error：false，警告：false}” =＆gt; 没有设置课程

你可以注意到ng-class只是哈希，其中键是类和值的名称 - 条件（如果为true，则类将被添加到class属性）

因此，ng-class只使用角度表达式并检查它返回的数据（字符串，数组或散列映射），然后它应用某个解析器来获取最终的类数组以将其放入class。其中之一如上所述。

角度表达式

Angular就像Javascript使用eval机制来执行代码（表达式）一样，但与JS Angular不同，使用名为$eval([expression], [locals])的安全eval（Docs）

我强烈建议您阅读有关Angular表达式的article以了解它的工作原理。

Answer 2

来自ngClass参数docs：

参数评估的结果可以是字符串表示空格分隔的类名，数组或类的映射名称为布尔值。在地图的情况下，的名称值为truthy的属性将作为css类添加到元件。

因此，在您的情况下，评估后的参数结果是一个产生：

的地图

ng-class="{error:true,warning:true}"
=> class="error warning"

ng-class="{error:true,warning:false}"
=> class="error"

ng-class="{error:false,warning:true}"
=> class="warning"

ng-class="{error:false,warning:false}"
=> no class attribute

Answer 3

Angular会将以下类属性添加（或附加到现有类attr）：

class =＆＃34;错误警告＆＃34;
类=＆＃34;错误＆＃34;
类=＆＃34;警告＆＃34;
未添加类属性

角度表达插值

3 个答案:

角度表达式