Angularjs 角表达式插值

我在一本书中介绍了以下ng class=“expression”示例。

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

以下情况的含义是什么（评估值是多少）以及原因是什么

ng class=“{错误：true，警告：true}”

ng class=“{错误：true，警告：false}”

ng class=“{错误：错误，警告：正确}”

ng class=“{错误：错误，警告：错误}”

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}”=>未设置类

正如您所注意到的，ng class get just hash，其中键是类和值的名称——条件（如果为true，则类将添加到

class

属性）

因此，

ng类

只需使用角度表达式并检查它返回的数据（字符串、数组或哈希映射），然后它应用特定的解析器获得最终的类数组，将其放入

类

。上述就是其中之一

角度表达式 Angular与Javascript一样使用eval机制来执行代码（表达式），但与JS不同，Angular使用名为

$eval（[expression]，[locals]）

（）

我强烈建议你阅读这篇关于角度表达式的文章，了解它是如何工作的

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}”=>未设置类

正如您所注意到的，ng class get just hash，其中键是类和值的名称——条件（如果为true，则类将添加到

class

属性）

因此，

ng类

只需使用角度表达式并检查它返回的数据（字符串、数组或哈希映射），然后它应用特定的解析器获得最终的类数组，将其放入

类

。上述就是其中之一

角度表达式 Angular与Javascript一样使用eval机制来执行代码（表达式），但与JS不同，Angular使用名为

$eval（[expression]，[locals]）

（）

我强烈建议您阅读这篇关于Angular表达式的文章，以了解其工作原理。

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

class=“错误警告”

class=“错误”

class=“警告”

没有添加类属性

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

class=“错误警告”

class=“错误”

class=“警告”

没有添加类属性

从参数文档中：

参数计算的结果可以是字符串 表示以空格分隔的类名、数组或类的映射 将名称转换为布尔值。如果是地图，则为 值为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

从参数文档中：

参数计算的结果可以是字符串 表示以空格分隔的类名、数组或类的映射 将名称转换为布尔值。如果是地图，则为 值为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

---

CSS类将根据条件设置。如果

isError

为true，则将添加错误类。这里没有插值。您正在将JSON传递给

ngClass

CSS类将根据条件进行设置。如果

isError

为true，则将添加错误类。这里没有插值。您正在将JSON传递给

ngClass

nice，但一些解释可能有助于问题的作者：）感谢Max的回答，感谢Jarema理解我的观点：）。我可以在HTML中看到，但我的疑问是对象{error:true | | | false，warning:true | | false}是如何计算和分配的。谢谢，但一些解释可能会对问题的作者有所帮助：）谢谢Max的回答，谢谢Jarema理解我的观点：）。我可以在HTML中看到，但我的疑问是对象{error:true | | | false，warning:true | | false}是如何计算和分配的。谢谢汉克斯·卡塔林。这让我明白了，谢谢你。这有助于我理解。