Operator trójskładnikowy w szablonach AngularJS

239

Jak zrobić trójkę z AngularJS (w szablonach)?

Byłoby miło użyć niektórych atrybutów HTML (klas i stylu) zamiast tworzyć i wywoływać funkcję kontrolera.

javascript html angularjs ternary-operator Cricardol
źródło

Odpowiedzi:

374

Aktualizacja : Angular 1.1.5 dodał operator trójskładnikowy , więc teraz możemy po prostu pisać

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

Jeśli używasz wcześniejszej wersji Angulara, masz dwie możliwości:

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

punkt 2. powyżej tworzy obiekt o dwóch właściwościach. Składnia tablicowa służy do wyboru właściwości o nazwie true lub właściwości o nazwie false i zwracania powiązanej wartości.

Na przykład,

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

$ first jest ustawione na true w powtórzeniu ng dla pierwszego elementu, więc powyższe zastosuje klasy „myClass1” i „myClass2” tylko za pierwszym razem przez pętlę.

Z klasą ng jest jednak łatwiejszy sposób: klasa-ng przyjmuje wyrażenie, które musi być ocenione na jedno z poniższych:

  1. ciąg nazw klas rozdzielanych spacjami
  2. tablica nazw klas
  3. mapa / obiekt nazw klas na wartości boolowskie.

Przykład 1) podano powyżej. Oto przykład 3, który moim zdaniem brzmi znacznie lepiej:

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

Za pierwszym razem poprzez pętlę powtarzania ng dodawana jest klasa myClass. Za trzecim razem ($ index zaczyna się od 0), klasa anotherClass jest dodawana.

ng-style przyjmuje wyrażenie, które musi być przetwarzane na mapę / obiekt nazw stylów CSS na wartości CSS. Na przykład,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
Mark Rajcok
źródło
6
Gdybym mógł, chciałbym ponownie zagłosować za aktualizację pytania!
Narretz
2
Zajmę się tym, @Narretz.
Ian Hunter,
1
W przykładzie dostępu do klucza obiektowego możesz pominąć klucz „false”, ponieważ i tak jest to pusty ciąg.
0xc0de
Słowo ostrzeżenia 1.1.5 nie jest obecnie stabilne.
Adam Grant
Co się stanie, jeśli warunki warunkowe zmienią się po aktualizacji modelu? Chciałbym ng-stylezaktualizować, ale wydaje się, że jest oceniany tylko przy pierwszym renderowaniu elementu. (Angular noob tutaj)
Hartley Brody
86

Aktualizacja: Angular 1.1.5 dodał operator trójskładnikowy, ta odpowiedź jest poprawna tylko dla wersji wcześniejszych niż 1.1.5. W wersji 1.1.5 i nowszych zobacz aktualnie przyjętą odpowiedź.

Przed Angular 1.1.5:

Forma trójki w angularjs jest:

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

Przykładem może być:

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

lub:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
Cricardol
źródło
1
Dziwne. To nie jest bardzo intuicyjne. Zastanawiam się, dlaczego został zaimplementowany w ten sposób.
Ben Lesh
4
Ternary nigdy nie został wdrożony, ale wykorzystuje to po prostu operatory binarne.
Andrew Joslin,
18
@ rozwiązywanie problemów, AngularJS promuje testowalność. Szablony nie powinny zawierać żadnej logiki. Operator trójskładnikowy w szablonie powinien zostać refaktoryzowany do wywołania funkcji do kontrolera, dla lepszej testowalności.
Marcello Nuccio,
1
@ arg20 powinieneś użyć dyrektywy ngClass (lub ngClassEven i ngClassOdd). Następnie umieść całą logikę wyboru klas css w kontrolerze. Jest to o wiele łatwiejsze do automatycznego przetestowania.
Marcello Nuccio,
1
@ arg20 Powiedziałem, aby umieścić go w kontrolerze, a nie w modelu. To nie powinno stanowić problemu. Jednak dokumentacja mówi: „Wynikiem oceny może być ciąg znaków reprezentujący nazwy klas rozdzielane spacjami, tablicę lub mapę nazw klas do wartości boolowskich”. Oznacza to, że możesz użyć „{cssclass: someBoolCheck ()}” jako wyrażenia, tzn. Umieścisz klasę css w widoku, a logikę w kontrolerze. Spójrz na ten jsFiddle na przykład.
Marcello Nuccio,
23

W przypadku tekstów w szablonie kątowym ( userTypejest własnością $ scope, jak $ scope.userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>
Ikrom
źródło
11

Do tej pory wszyscy odkryliśmy, że wersja 1.1.5 ma odpowiednią trójkę w $parsefunkcji, więc użyj tej odpowiedzi jako przykładu filtrów:

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

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

A następnie użyj go jako

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
Jan
źródło
2
Przyszedłem do tego pytania dla operatora trójskładnikowego, ale na końcu poszedłem z filtrem i czułem się naprawdę dobrze ... = D
slacktracer 30.10.2013
10

Oto on: operator trójkowy został dodany do parsera kątowego w 1.1.5 ! zobacz dziennik zmian

Oto skrzypce pokazujące nowego trójskładnikowego operatora stosowanego w dyrektywie klasy ng.

ng-class="boolForTernary ? 'blue' : 'red'"
lewice
źródło
10

Chociaż możesz używać condition && if-true-part || if-false-part-syntax w starszych wersjach angular, zwykły operator trójskładnikowy condition ? true-part : false-partjest dostępny w Angular 1.1.5 i nowszych .

Aleksander Blomskøld
źródło
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>

Przycisk przełącza i zmienia nagłówek przycisku oraz wyświetla / ukrywa panel div. Zobacz Plunkr

Zahid Rahman
źródło