[解決済み】AngularJSのテンプレートで三項演算子

質問

AngularJSで（テンプレートで）三分割をするにはどうすればいいのでしょうか？

コントローラの関数を作って呼び出すのではなく、htmlの属性（classやstyle）を利用できるといいのですが。

解決方法は？

更新情報 : Angular 1.1.5で追加された 三項演算子 と書くことができるようになりました。

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

以前のバージョンのAngularを使用している場合、選択肢は2つです。

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

は、2つのプロパティを持つオブジェクトを作成します。 配列構文を使って、true という名前のプロパティと false という名前のプロパティのどちらかを選択し、関連する値を返します。

例

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

firstは最初の要素のng-repeatの中でtrueに設定されているので、上記はループの最初の回だけクラス 'myClass1' と 'myClass2' を適用することになります。

と ngクラス ng-classは、以下のいずれかに評価されなければならない式を取ります。

1. スペースで区切られたクラス名の文字列
2. クラス名の配列
3. クラス名とブーリアン値のマップ/オブジェクト。

上記1）の例を挙げました。 以下は3の例で、もっと読みやすいと思います。

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

ng-repeatループの初回に、クラスmyClassが追加されます。 3回目($indexが0から始まる)のとき、anotherClassが追加されます。

ngスタイル は、CSS スタイル名と CSS 値のマップ/オブジェクトとして評価される必要がある式を取ります。 例えば

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>