Operatore ternario nei modelli AngularJS

239

Come si fa un ternario con AngularJS (nei modelli)?

Sarebbe bello usarne alcuni negli attributi html (classi e stile) invece di creare e chiamare una funzione del controller.

— cricardol
fonte

374

Aggiornamento : Angular 1.1.5 ha aggiunto un operatore ternario , quindi ora possiamo semplicemente scrivere

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

Se si utilizza una versione precedente di Angular, le due opzioni disponibili sono:

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

il punto 2. sopra crea un oggetto con due proprietà. La sintassi dell'array viene utilizzata per selezionare la proprietà con nome true o la proprietà con nome false e restituire il valore associato.

Per esempio,

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

$ first è impostato su true all'interno di ng-repeat per il primo elemento, quindi quanto sopra applicherebbe la classe 'myClass1' e 'myClass2' solo la prima volta attraverso il ciclo.

Con ng-class esiste tuttavia un modo più semplice: ng-class accetta un'espressione che deve valutare una delle seguenti:

una stringa di nomi di classe delimitati da spazi
una matrice di nomi di classe
una mappa / oggetto di nomi di classe per valori booleani.

Un esempio di 1) è stato dato sopra. Ecco un esempio di 3, che penso sia molto meglio:

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

La prima volta attraverso un ciclo ng-repeat, viene aggiunta la classe myClass. La terza volta ($ index inizia da 0), viene aggiunta la classe anotherClass.

ng-style accetta un'espressione che deve valutare una mappa / oggetto dei nomi di stile CSS in base a valori CSS. Per esempio,

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

— Mark Rajcok
fonte

6

Se potessi, ti voterei di nuovo per l'aggiornamento della domanda!

— Narretz,

2

Mi prenderò cura di esso, @Narretz.

— Ian Hunter,

1

Nell'esempio di accesso alla chiave oggetto, è possibile saltare la chiave 'false' poiché è comunque stringa vuota.

— 0xc0de,

Avvertenza, 1.1.5 non è attualmente stabile.

— Adam Grant,

Cosa succede se il condizionale cambia quando il modello viene aggiornato? Mi piacerebbe ng-styleaggiornare, ma sembra essere valutato solo quando l'elemento viene renderizzato per la prima volta. (Angolo angolare qui)

— Hartley Brody,

86

Aggiornamento: Angular 1.1.5 ha aggiunto un operatore ternario, questa risposta è corretta solo per le versioni precedenti a 1.1.5. Per 1.1.5 e successive, vedere la risposta attualmente accettata.

Prima di Angular 1.1.5:

La forma di un ternario in angularjs è:

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

Un esempio potrebbe essere:

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

o:

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

— cricardol
fonte

1

Strano. Non è molto intuitivo. Mi chiedo perché sia stato implementato in questo modo.

— Ben Lesh,

4

Ternary non è mai stato implementato, ma questo sta semplicemente usando gli operatori binari nel modo in cui funzionano.

— Andrew Joslin,

18

@blesh, AngularJS promuove la testabilità. I modelli non devono contenere alcuna logica. Un operatore ternario in un modello deve essere sottoposto a refactoring a una chiamata di funzione al controller, per una migliore testabilità.

— Marcello Nuccio,

1

@ arg20 dovresti usare la direttiva ngClass (o ngClassEven e ngClassOdd). Quindi inserisci tutta la logica per scegliere le classi css nel controller. È molto più facile testarlo automaticamente.

— Marcello Nuccio,

1

@ arg20 Ho detto di metterlo nel controller, non nel modello. Questo non dovrebbe essere un problema. Tuttavia, la documentazione dice: "Il risultato della valutazione può essere una stringa che rappresenta i nomi di classe delimitati da spazi, un array o una mappa di nomi di classe con valori booleani". Ciò significa che è possibile utilizzare "{cssclass: someBoolCheck ()}" come espressione, ovvero inserire la classe css nella vista e la logica nel controller. Guarda questo jsFiddle per un esempio.

— Marcello Nuccio,

23

Per i testi nel modello angolare ( userTypeè proprietà di $ scope, come $ scope.userType):

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

— Ikrom
fonte

11

Ormai abbiamo scoperto che la versione 1.1.5 include un ternario adeguato nella $parsefunzione, quindi usa questa risposta come esempio di filtri:

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

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

E poi usalo come

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

— Jan
fonte

2

Sono arrivato a questa domanda per l'operatore ternario ma alla fine sono andato con un filtro e mi sono sentito davvero bene ... = D

— slacktracer

10

Eccolo: l'operatore ternario è stato aggiunto al parser angolare in 1.1.5 ! vedi il log delle modifiche

Ecco un violino che mostra il nuovo operatore ternario utilizzato nella direttiva di classe ng.

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

— lionroots
fonte

10

Mentre è possibile utilizzare la condition && if-true-part || if-false-partsintassi nelle versioni precedenti di angolare, il solito operatore ternario condition ? true-part : false-partè disponibile in Angolare 1.1.5 e versioni successive .

— Aleksander Blomskøld
fonte

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>

Pulsante per attivare e disattivare l'intestazione del pulsante e mostrare / nascondere il pannello div. Vedi il Plunkr

— Zahid Rahman
fonte