web-dev-qa-db-ja.com

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

どのようにAngularJSを使って（テンプレートの中で）三項を使いますか？

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

javascripthtmlangularjsternary-operator
235
cricardol

更新：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は、2つのプロパティを持つオブジェクトを作成します。配列構文は、名前がtrueのプロパティまたは名前がfalseのプロパティのいずれかを選択し、関連付けられた値を返すために使用されます。

例えば。、

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

最初の要素のng-repeatの中で$ firstがtrueに設定されているので、上記の例ではループを通して最初に初めてクラス 'myClass1'と 'myClass2'が適用されます。

ng-classを使うともっと簡単な方法があります。ng-classは次のいずれかに評価される式を取ります。

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

１）の例が上に与えられた。これが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>
370
Mark Rajcok

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

Angular 1.1.5の前：

Angularjsの3進数の形式は次のとおりです。

((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>
86
cricardol

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

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

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

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>
11
Jan

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

10
Aleksander Blomskøld

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

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

ng-class="boolForTernary ? 'blue' : 'red'"
10
lionroots
  <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パネルの表示/非表示を切り替えます。 Plunkrを参照してください

0
Zahid Rahman