html - 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 のドキュメントに最初に登場したようですが、一般的にその使用は推奨されていません。

From: AngularJS: 開発者ガイド: 式

三項演算子 (a ? b : c) を除いて、制御フロー ステートメントを式に記述することはできません。この背後にある理由は、ビューではなくコントローラーにアプリケーション ロジックを配置する必要があるという Angular の哲学の核となるものです。実際の条件、ループ、またはビュー式からのスローが必要な場合は、代わりに JavaScript メソッドに委譲します。