AngularJSテンプレートの三項演算子

239

（テンプレート内の）AngularJSで3値をどのように使用しますか？

コントローラーの関数を作成して呼び出すのではなく、html属性（クラスとスタイル）でいくつか使用するとよいでしょう。

374

アップデート：アンギュラ1.1.5が追加さ三項演算子、今私たちができるだけで書き込みを

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

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

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

上記の項目2.は、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-クラスは、次のいずれかに評価されなければならない式を取りますけれども、もっと簡単な方法があります：

スペースで区切られたクラス名の文字列
クラス名の配列
クラス名のブール値へのマップ/オブジェクト。

1）の例は上に示した。これは3の例です。

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

ng-repeatループを初めて通過するときに、クラスmyClassが追加されます。3回目（$ indexは0から始まります）、クラスanotherClassが追加されます。

ng-styleは、CSSスタイル名からCSS値へのマップ/オブジェクトに評価される必要がある式を受け取ります。例えば、

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

— マーク・ライコック
ソース

6

できれば、質問を更新して再度投票します！

— Narretz、2013年

2

@Narretz、私がそれを処理します。

— Ian Hunter

1

オブジェクトキーアクセスの例では、「false」キーは空の文字列であるためスキップできます。

— 0xc0de 2013

警告の言葉、1.1.5は現在安定していません。

— アダムグラント

モデルが更新されたときに条件が変更された場合はどうなりますか？をng-style更新したいのですが、要素が最初にレンダリングされたときにのみ評価されるようです。（ここでの角度のnoob）

— Hartley Brody

86

更新： Angular 1.1.5は三項演算子を追加しました。この答えは1.1.5より前のバージョンにのみ正解です。1.1.5以降については、現在受け入れられている回答を参照してください。

Angular 1.1.5より前：

angularjsの三項の形式は次のとおりです。

((condition) && (answer if true) || (answer if false))

例は次のとおりです。

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

または：

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

— クリカルドール
ソース

1

変だ。それはあまり直感的ではありません。なぜこのように実装されたのでしょうか。

— Ben Lesh

4

Ternaryが弱体化されることはありませんでしたが、これは、2項演算子をその動作方法で使用しているだけです。

— アンドリュージョスリン

18

@ blesh、AngularJSはテスト容易性を促進します。テンプレートにはロジックを含めないでください。テンプレート内の三項演算子は、テスト容易性を高めるために、コントローラーへの関数呼び出しにリファクタリングする必要があります。

— Marcello Nuccio 2012

1

@ arg20 ngClassディレクティブ（またはngClassEvenおよびngClassOdd）を使用する必要があります。次に、CSSクラスを選択するためのすべてのロジックをコントローラーに配置します。これは自動的にテストする方がはるかに簡単です。

— Marcello Nuccio 2013

1

@ arg20モデルではなくコントローラに配置するように言いました。これは問題にはなりません。ただし、ドキュメントには、「評価の結果は、スペースで区切られたクラス名を表す文字列、配列、またはブール値へのクラス名のマップになる可能性がある」と記載されています。「{cssclass：someBoolCheck（）}」を式として使用できることを意味します。つまり、cssクラスをビューに配置し、ロジックをコントローラーに配置します。例として、このjsFiddleを見てください。

— Marcello Nuccio 2013

23

角度テンプレートのテキストの場合（userType$ scope.userTypeのような$ scopeのプロパティ）：

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

— イクロム
ソース

11

これで、バージョン1.1.5には適切な3項が$parse関数に含まれていることがわかりました。フィルターの例としてこの回答を使用してください。

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

そしてそれを

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

— ヤン
ソース

2

私は三項演算子についてこの質問に行きましたが、最後にフィルターを使用しましたが、それは本当に良い気分でした... = D

— slacktracer

10

あります：1.1.5で三項演算子が角度パーサーに追加されました！変更ログを見る

これは、 ng-classディレクティブで使用される新しい三項演算子を示すフィドルです。

ng-class="boolForTernary ? 'blue' : 'red'"

— ライオンルーツ
ソース

10

condition && if-true-part || if-false-part古いバージョンのangularで-syntaxを使用できますが、通常の三項演算子condition ? true-part : false-partはAngular 1.1.5以降で使用できます。

— アレクサンダー・ブロムスコールド
ソース

0

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

ボタンの切り替えとボタンのヘッダーの変更、divパネルの表示/非表示。プランカーを見る

— ザヒド・ラーマン
ソース