Angular ng-class if else

Question

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

如果页面处于选中状态，则page.isSelected(1)为TRUE，否则为FALSE

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

因此，我希望你：

isSelected为真:居中

isSelected为FALSE: left

我试过了：

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

但是它不起作用。

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

Answer 1

只需为每种情况制定一条规则：

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

或者使用三元运算符：

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

Answer 2

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

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

Answer 3

John Conde's和ryeballar's的答案都是正确的，并且可以正常工作。

如果你想变得太极客：

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

因此，您可以执行以下操作作为替代方案：

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