HTML属性中的AngularJS条件

Question

您如何html根据模型更改属性？

我正在尝试根据数组的长度更改输入的占位符文本:

<input placeholder="{{todos.length ? 'Insert todo' : 'Insert your first todo'}}" />

但这似乎不起作用......

JS Bin代码示例.

Answer 1

在这种情况下,三元运算符似乎不起作用,而不是这样做

{{cond ? true : false}}

将其更改为

{{ exp && true || false }}

所以你的placeholder属性看起来像这样(为了演示目的,我已缩短它)

placeholder="{{todos.length > 0 && 'Insert' || 'Insert first'}}"

Answer 2

对于遇到此问题的其他人(就像我刚刚通过Google做的那样),看起来Angular最近在表达式中添加了对三元运算符的支持.我只是在1.2.16中成功使用它来动态更新工具提示(标题)属性.它似乎首次出现在1.2.17的文档中,尽管它们通常仍然不鼓励使用它:

来自:AngularJS:开发人员指南:表达式

除了三元运算符(a？b:c)之外,您无法在表达式中编写控制流语句.这背后的原因是Angular哲学的核心,即应用程序逻辑应该在控制器中,而不是视图中.如果您需要一个真正的条件,循环或从视图表达式抛出,请委托JavaScript方法.