Angularjs if-then-else表达式

103

我可以以某种方式在angularjs表达式中使用if-then-else构造（ternary-operator），例如我有必须返回bool值的函数$ scope.isExists（item）。我想是这样的，Angularjs if-then-else表达式

<div ng-repeater="item in items"> 
    <div>{{item.description}}</div> 
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div> 
</div>

我知道，我可以用函数返回字符串，我使用的if-then-else的建设纳入表达的可能性很有趣。谢谢。

来源

2013-05-16 IgorCh

退房['NG-之开关（http://docs.angularjs.org/api/ng.directive:ngSwitch） – NilsH

由于1.2这是现在的支持。 – nilskp

198

角表达式之前不支持三元运算符1.1.5，但它可以这样模拟：

condition && (answer if true) || (answer if false)

所以在例子中，像这样的东西将工作：

<div ng-repeater="item in items"> 
    <div>{{item.description}}</div> 
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div> 
</div>

UPDATE：角1.1.5增加了对三元运营商的支持：

{{myVar === "two" ? "it's true" : "it's false"}}

来源

2013-05-16 11:16:24

请注意，这只适用于（如果真的答案）是truthy。 –

&&是否需要转义？ – 0xcaff

@caffinatedmonkey不，你不能。你可以（如果可能的话）使用三元运算符，就像我在主题问题的答案中解释的一样。 – Sebastian

您可以轻松地使用NG-秀如：

<div ng-repeater="item in items"> 
     <div>{{item.description}}</div> 
     <div ng-show="isExists(item)">available</div> 
     <div ng-show="!isExists(item)">oh no, you don't have it</div> 
    </div>

对于更复杂的测试，您可以用NG-switch语句：

<div ng-repeater="item in items"> 
     <div>{{item.description}}</div> 
     <div ng-switch on="isExists(item)"> 
      <span ng-switch-when="true">Available</span> 
      <span ng-switch-default>oh no, you don't have it</span> 
     </div> 
    </div>

来源

2013-05-16 10:04:41 Mickael

像这样在元素级别而不是表达式内部执行它的优点是，您可以更多地自定义不同选项的样式和内容。 – Supr

是的，我知道它可以提供帮助，但我不想为文档添加额外的div。但也谢谢 – IgorCh

您可以使用三元运算符，因为1.1.5及以上版本，喜欢在这个小plunker证明（例如在1.1.5）：

由于历史原因（也许plnkr.co因为某种原因沮丧）这里是我的例子的主代码：

{{true?true:false}}

来源

2014-02-20 14:42:42 Sebastian

由于历史原因（也许plnkr.co在未来出于某种原因而下降）这里是我的例子的主要代码：'{{true？true：false}}' – Sebastian

到底我在找什么谢谢你，几乎用了一个过滤器来做到这一点。 –

@IgorCh：你可能想更新接受的答案:) –

Angularjs if-then-else表达式

回答

相关问题