Angular ng-class if else

Question

我想知道如何制作错误的课程.

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

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

因此,如果:

isSelected为TRUE:center

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

无论约翰·孔德的和ryeballar的答案是正确的,并会工作.

如果你想变得太怪异了:

• John的缺点是它必须在每个$ digest循环中做出两个决定(它必须决定是否添加/删除center,并且必须决定是否添加/删除left),当显然只需要一个时.

• Ryeballar依赖于三元运算符,它可能会在某些时候被删除(因为视图不应该包含任何逻辑).(我们无法确定它是否会被删除,它可能不会很快就会消失,但如果有更"安全"的解决方案,为什么不呢？)

因此,您可以选择执行以下操作:

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