AngularJS 模板中的内联逻辑
Posted
技术标签:
【中文标题】AngularJS 模板中的内联逻辑【英文标题】:Inline-logic in templates in AngularJS 【发布时间】:2013-03-02 18:53:55 【问题描述】:有没有办法在AngularJS的模板中内联编写逻辑。
我想做的是这样的:
<div ng-repeat="item in items">
item.isValid ? 'Valid item' : 'Invalid Item'
</div>
【问题讨论】:
【参考方案1】:您可以使用&&
和||
,它们最终会像三元运算符一样工作。
item.isValid && 'Valid' || 'Invalid'
编辑:Angular 在 1.1.5 中引入了三元运算符:
item.isValid ? 'Valid' : 'Invalid'
【讨论】:
漂亮!正是我想要的。他们在文档中提到花括号内可以有“表达式”,现在我更好地理解了如何使用它们。谢谢。 Angular 在 1.1.5 中引入了三元。见这里 - ***.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>
【讨论】:
这正是我害怕的臃肿解决方案...... :(以上是关于AngularJS 模板中的内联逻辑的主要内容,如果未能解决你的问题,请参考以下文章