Angular ng-class if else答案

【问题标题】：Angular ng-class if elseAngular ng-class if else
【发布时间】：2023-03-27 06:00:01
【问题描述】：

我想知道如何制作 False ng-class。

page.isSelected(1) 如果页面被选中则为 TRUE，否则为 FALSE

<div id="homePage" ng-class="{ center: page.isSelected(1) }">

因此我想要你：

isSelected 为 TRUE：居中

isSelected 为 FALSE：左

我试过了：

<div id="homePage" ng-class="{ page.isSelected(1) 'center : 'left' }">

但它不起作用。

我不知道我做错了什么。你能帮帮我吗？

【问题讨论】：

【解决方案1】：

只需为每个案例制定规则：

<div id="homePage" ng-class="{ 'center': page.isSelected(1) , 'left': !page.isSelected(1)  }">

或者使用三元运算符：

<div id="homePage" ng-class="page.isSelected(1) ? 'center' : 'left'">

【讨论】：

【解决方案2】：

您可以使用三元运算符表示法：

<div id="homePage" ng-class="page.isSelected(1)? 'center' : 'left'">

【讨论】：

【解决方案3】：

John Conde's 和 ryeballar's 的答案都是正确的并且会起作用。

如果你想变得太极客：

John's 的缺点是它必须在每个 $digest 循环中做出两个决定（它必须决定是否添加/删除center，并且必须决定是否添加/删除left），当显然只需要一个。
Ryeballar 依赖于三元运算符，它可能会在某个时候被删除（因为视图不应包含任何逻辑）。（我们不能确定它确实会被移除，而且可能不会很快被移除，但如果有更“安全”的解决方案，为什么不呢？）

因此，您可以执行以下操作：

ng-class="{true:'center',false:'left'}[page.isSelected(1)]"

【讨论】：

根据您的第二个陈述，ng-class="[]" 符号是否也可以删除？如果没有，那么仍然可以这样做：ng-class="[page.isSelected(1)? 'center : 'left']"
ternay 运算符将从 $parser 的“能力”中删除（至少这是 Igor Minar 所希望的 :)）。这意味着没有包含三元运算符的表达式可以解析为 Angular 表达式。