Ternärer Operator in AngularJS-Vorlagen

239

Wie macht man ein Ternär mit AngularJS (in den Vorlagen)?

Es wäre schön, einige in HTML-Attributen (Klassen und Stil) zu verwenden, anstatt eine Funktion des Controllers zu erstellen und aufzurufen.

javascript html angularjs ternary-operator Cricardol
quelle

Antworten:

374

Update : Angular 1.1.5 hat einen ternären Operator hinzugefügt , sodass wir jetzt einfach schreiben können

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

Wenn Sie eine frühere Version von Angular verwenden, haben Sie zwei Möglichkeiten:

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

Punkt 2. oben erstellt ein Objekt mit zwei Eigenschaften. Die Array-Syntax wird verwendet, um entweder die Eigenschaft mit dem Namen true oder die Eigenschaft mit dem Namen false auszuwählen und den zugehörigen Wert zurückzugeben.

Z.B,

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

$ first wird innerhalb einer ng-Wiederholung für das erste Element auf true gesetzt, sodass die oben genannten Klassen 'myClass1' und 'myClass2' nur beim ersten Durchlaufen der Schleife angewendet werden.

Mit ng-class gibt es jedoch einen einfacheren Weg: ng-class verwendet einen Ausdruck, der wie folgt ausgewertet werden muss:

  1. eine Zeichenfolge von durch Leerzeichen getrennten Klassennamen
  2. ein Array von Klassennamen
  3. eine Zuordnung / ein Objekt von Klassennamen zu booleschen Werten.

Ein Beispiel für 1) wurde oben angegeben. Hier ist ein Beispiel von 3, das meiner Meinung nach viel besser liest:

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

Beim ersten Durchlaufen einer ng-repeat-Schleife wird die Klasse myClass hinzugefügt. Beim dritten Durchgang ($ index beginnt bei 0) wird die Klasse anotherClass hinzugefügt.

ng-style verwendet einen Ausdruck, der zu einer Zuordnung / einem Objekt von CSS-Stilnamen zu CSS-Werten ausgewertet werden muss. Z.B,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
Mark Rajcok
quelle
6
Wenn ich könnte, würde ich Sie erneut für die Aktualisierung der Frage bewerten!
Narretz
2
Ich werde mich darum kümmern, @Narretz.
Ian Hunter
1
Im Beispiel für den Zugriff auf Objektschlüssel können Sie den Schlüssel 'false' überspringen, da es sich ohnehin um eine leere Zeichenfolge handelt.
0xc0de
Warnung, 1.1.5 ist derzeit nicht stabil.
Adam Grant
Was passiert, wenn sich die Bedingung ändert, wenn Ihr Modell aktualisiert wird? Ich möchte das ng-styleaktualisieren, aber es scheint nur ausgewertet zu werden, wenn das Element zum ersten Mal gerendert wird. (Angular Noob hier)
Hartley Brody
86

Update: Angular 1.1.5 hat einen ternären Operator hinzugefügt. Diese Antwort ist nur für Versionen vor 1.1.5 korrekt. Informationen zu 1.1.5 und höher finden Sie in der aktuell akzeptierten Antwort.

Vor dem Winkel 1.1.5:

Die Form eines Ternärs in Angularjs ist:

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

Ein Beispiel wäre:

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

oder:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
Cricardol
quelle
1
Seltsam. Das ist nicht sehr intuitiv. Ich frage mich, warum es so implementiert wurde.
Ben Lesh
4
Ternary wurde nie implementiert, aber dies verwendet nur die Binäroperatoren, wie sie funktionieren.
Andrew Joslin
18
@blesh, AngularJS fördert die Testbarkeit. Vorlagen sollten keine Logik enthalten. Ein ternärer Operator in einer Vorlage sollte zur besseren Testbarkeit auf einen Funktionsaufruf an die Steuerung umgestaltet werden.
Marcello Nuccio
1
@ arg20 Sie sollten die ngClass- Direktive (oder ngClassEven und ngClassOdd) verwenden. Stellen Sie dann die gesamte Logik für die Auswahl der CSS-Klassen in den Controller. Dies ist viel einfacher automatisch zu testen.
Marcello Nuccio
1
@ arg20 Ich sagte, es in den Controller zu setzen, nicht in das Modell. Dies sollte kein Problem sein. In der Dokumentation heißt es jedoch: "Das Ergebnis der Auswertung kann eine Zeichenfolge sein, die durch Leerzeichen getrennte Klassennamen, ein Array oder eine Zuordnung von Klassennamen zu booleschen Werten darstellt." Dies bedeutet, dass Sie "{cssclass: someBoolCheck ()}" als Ausdruck verwenden können, dh Sie setzen die CSS-Klasse in die Ansicht und die Logik in den Controller. Schauen Sie sich diese jsFiddle für ein Beispiel an.
Marcello Nuccio
23

Für Texte in eckigen Vorlagen ( userTypeist eine Eigenschaft von $ scope, wie $ scope.userType):

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

Inzwischen haben wir alle herausgefunden, dass Version 1.1.5 einen richtigen Ternär in der $parseFunktion enthält. Verwenden Sie diese Antwort einfach als Beispiel für Filter:

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

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

Und dann benutze es als

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
Jan.
quelle
2
Ich kam zu dieser Frage für den ternären Operator, aber am Ende ging ich mit einem Filter und es fühlte sich wirklich gut an ... = D
Slacktracer
10

Da ist es: Der ternäre Operator wurde in 1.1.5 zum Winkelparser hinzugefügt ! siehe das Changelog

Hier ist eine Geige, die einen neuen ternären Operator zeigt, der in der Direktive der Klasse ng verwendet wird.

ng-class="boolForTernary ? 'blue' : 'red'"
Löwenwurzeln
quelle
10

Während Sie die condition && if-true-part || if-false-part-syntax in älteren Versionen von Angular verwenden können , ist der übliche ternäre Operator condition ? true-part : false-partin Angular 1.1.5 und höher verfügbar .

Aleksander Blomskøld
quelle
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>

Schaltfläche umschalten und Kopfzeile der Schaltfläche ändern und Div-Bereich ein- / ausblenden. Siehe den Plunkr

Zahid Rahman
quelle