Operator trójdzielny w szablonach AngularJS

Jak zrobić Trójnik z AngularJS (w szablonach)?

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

Author: starcorn, 2012-08-17
Source

7 answers

Aktualizacja : Angular 1.1.5 dodał Operator trójkowy, więc teraz możemy po prostu napisać 

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">
Jeśli używasz wcześniejszej wersji Angular, masz dwie opcje:]}
  1. (condition && result_if_true || !condition && result_if_false)
  2. {true: 'result_if_true', false: 'result_if_false'}[condition]

Pozycja 2. powyżej tworzy obiekt o dwóch właściwościach. Składnia array służy do wybrania właściwości o nazwie true lub właściwości o nazwie false i zwrócenia powiązanej wartości.

Np., 

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

$pierwszy jest ustawia się na true wewnątrz ng-repeat dla pierwszego elementu, więc powyższe będzie stosować klasy 'myClass1' i 'myClass2' tylko za pierwszym razem przez pętlę.

Z ng-class jest jednak łatwiejszy sposób: ng-class przyjmuje wyrażenie, które musi oceniać do jednego z następujących:

  1. łańcuch nazw klas rozdzielonych spacjami
  2. tablica nazw klas
  3. Mapa / obiekt nazw klas do wartości logicznych.

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

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

Po raz pierwszy przez pętlę ng-repeat dodaje się klasę myClass. Trzeci raz przez ($index zaczyna się od 0), Klasa anotherClass jest dodawana.

Ng-style pobiera wyrażenie, które musi ocenić do mapy/obiektu nazw stylów CSS do wartości CSS. Np., 

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
 364
Author: Mark Rajcok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-28 11:40:00

Update: Angular 1.1.5 dodał operator trójkowy, ta odpowiedź jest poprawna tylko dla wersji poprzedzających 1.1.5. W przypadku wersji 1.1.5 i późniejszych zobacz aktualnie akceptowaną odpowiedź.

Before Angular 1.1.5:

Forma trójnika w angularjs to: 

((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>
 85
Author: cricardol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-23 09:17:38

Dla tekstów w szablonie kątowym (userType jest właściwością $scope, podobnie jak $scope.userType): 

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>
 16
Author: Ikrom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-14 11:46:49

Do tej pory wszyscy dowiedzieliśmy się wersji 1.1.5 jest wyposażony w odpowiedni trójnik w funkcji $parse, więc użyj tej odpowiedzi jako przykład 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>
 11
Author: Jan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-26 20:46:54

Oto jest: operator trójkowy został dodany do parsera kątowego w 1.1.5! Zobacz changelog

Oto fiddle pokazujący nowy operator trójkowy używany w dyrektywie klasy ng.

ng-class="boolForTernary ? 'blue' : 'red'"
 10
Author: lionroots,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 08:19:34

Chociaż można używać składni condition && if-true-part || if-false-part-w starszych wersjach angular, zwykły Operator trójkowy {[1] } jest dostępny w Angular 1.1.5 i późniejszych .

 10
Author: Aleksander Blomskøld,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 08:56:20 
  <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 włącza i zmienia nagłówek przycisku oraz Pokazuje / Ukrywa panel div. Zobacz Plunkr

 0
Author: Zahid Rahman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-02 17:06:43