239

(テンプレートで) AngularJS を使用してどのように三項演算を行うのですか?

コントローラーの関数を作成して呼び出す代わりに、html 属性 (クラスとスタイル) でいくつかを使用すると便利です。

4

8 に答える 8

374

更新: 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>

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

ただし、 ng-classを使用すると、より簡単な方法があります。ng-class は、次のいずれかに評価される必要がある式を取ります。

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

上記は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>
于 2012-08-28T00:59:06.847 に答える
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>
于 2012-08-17T15:20:25.133 に答える
10

この回答は、関数内の適切な3項が使用できなかったバージョン1.1.5よりも前のものです。$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>
于 2013-01-16T12:21:59.430 に答える
10

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

于 2013-05-19T09:20:11.290 に答える
9

1.1.5で 3 項演算子が angular パーサーに追加されました。変更ログを参照してください

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

ng-class="boolForTernary ? 'blue' : 'red'"
于 2013-05-23T08:19:34.833 に答える
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 パネルの表示/非表示。プランクを見る

于 2016-04-02T16:43:07.993 に答える