AngularJS 模板中的内联逻辑答案

【问题标题】：Inline-logic in templates in AngularJSAngularJS 模板中的内联逻辑
【发布时间】：2013-03-02 18:53:55
【问题描述】：

有没有办法在AngularJS的模板中内联编写逻辑。

我想做的是这样的：

<div ng-repeat="item in items">
    {{item.isValid ? 'Valid item' : 'Invalid Item'}}
</div>

【问题讨论】：

标签： templates angularjs

【解决方案1】：

您可以使用&& 和||，它们最终会像三元运算符一样工作。

{{item.isValid && 'Valid' || 'Invalid' }}

编辑：Angular 在 1.1.5 中引入了三元运算符：

{{item.isValid ? 'Valid' : 'Invalid' }}

【讨论】：

漂亮！正是我想要的。他们在文档中提到花括号内可以有“表达式”，现在我更好地理解了如何使用它们。谢谢。
Angular 在 1.1.5 中引入了三元。见这里 - stackoverflow.com/questions/12008580/…
只是想知道，在 HTML 中使用未转义的 '&' 是否有任何潜在问题？浏览器是否会在 Angular 渲染模板之前产生验证错误？
@kapace ，您的评论找到答案了吗？
@Eric，不，我刚刚忽略了这个问题，但我的编辑器将它作为一个问题突出显示。

【解决方案2】：

您不能在角度表达式中使用条件。而且，如果您的 div 内容很轻（只是文本），您可能需要使用 ng-bind（它还可以让您免于使用额外的 span 元素）：

<div ng-repeat="item in items" ng-bind="{true: 'Valid item', false: 'Invalid item'}[item.isValid]"></div>

【讨论】：

【解决方案3】：

你可以用 ng-show 插入一个 span 来显示你的条件文本

示例

<div ng-repeat="item in items">
    <span ng-show="item.isValid">
           Valid item
    </span>
    <span ng-show="!item.isValid">
           Invalid item
    </span> 
</div>

【讨论】：

这正是我害怕的臃肿解决方案...... :(