Тернарный оператор в шаблонах AngularJS

Как вы делаете тернарный с AngularJS (в шаблонах)?

было бы неплохо использовать некоторые атрибуты html (классы и стиль) вместо создания и вызова функции контроллера.

7 229
javascript angularjs html ternary-operator

7 ответов:

обновление: угловой 1.1.5 добавил a тернарный оператор, так что теперь мы можем просто написать

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

если вы используете более раннюю версию Angular, ваши два варианта:

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

пункт 2. выше создается объект с двумя свойствами. Синтаксис массива используется для выбора свойства с именем true или свойства с именем false и возврата значения соответствующее значение.

например,

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

$first имеет значение true внутри ng-repeat для первого элемента, поэтому выше будет применяться класс 'myClass1' и 'myClass2' только в первый раз через цикл.

С НГ-класс есть более простой способ, хотя: 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>
364

обновление: угловой 1.1.5 добавлен тернарный оператор, этот ответ верен только для версий, предшествующих 1.1.5. Для 1.1.5 и более поздних версий см. текущий принятый ответ.

Перед Угловым 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>
85

для текстов в угловом шаблоне (userType является свойством $scope, например $scope.userType):

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

к настоящему времени мы все узнали версию 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>
11

вот он: тернарный оператор добавлен в угловой парсер в 1.1.5! посмотреть историю изменений

вот скрипка отображение нового тернарного оператора, используемого в директиве ng-class.

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

в то время как вы можете использовать condition && if-true-part || if-false-part-синтаксис в старых версиях angular, обычный тернарный оператор condition ? true-part : false-part доступна Угловое 1.1.5 и выше.

10
  <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. Смотрите Plunkr

0