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

Question

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

214

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

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

cricardol 17 авг. 2012, в 16:52

Источник

0

Я использую фильтр для этого
Jan 16 янв. 2013, в 12:49

Теги:

javascript

html

angularjs

ternary-operator

7 ответов

87

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

До Angular 1.1.5:

Форма тройного в угловом порядке:

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

cricardol 17 авг. 2012, в 16:25

1

Weird. Это не очень интуитивно понятно. Интересно, почему это было реализовано таким образом?
Ben Lesh 17 авг. 2012, в 15:49
4

Ternary никогда не был реализован, но он просто использует бинарные операторы так, как они работают.
Andrew Joslin 17 авг. 2012, в 20:09
18

@blesh, AngularJS способствует тестируемости. Шаблоны не должны содержать никакой логики. Тернарный оператор в шаблоне должен быть преобразован в вызов функции контроллера для лучшей тестируемости.
Marcello Nuccio 18 авг. 2012, в 07:18
0

Должны ли приведенные выше примеры использовать ng-style и ng-class? (Я не уверен, когда их нужно использовать).
Mark Rajcok 18 авг. 2012, в 15:12
0

@MarcelloNuccio, +1, имеет смысл.
Ben Lesh 19 авг. 2012, в 02:05
0

@Mark, если вы хотите использовать стиль ng, то выражение должно быть равнозначно объекту, ключи которого являются именами стилей CSS, а значения - значениями CSS. Например, ng-style = "{color: $ location.path () == '/ page2' && '#fff' || '# 000'}". Я думаю, что это выглядит немного лучше, так как легче сказать, что вы устанавливаете «цвет».
Mark Rajcok 28 авг. 2012, в 00:25
0

@MarcelloNuccio, можешь ли ты уточнить это? Я хочу напечатать css-предложения в соответствии с логическим свойством, как бы я в точности реорганизовал это в контроллер? (я нуб, я знаю)
arg20 09 апр. 2013, в 14:14
1

@ arg20 вы должны использовать директиву ngClass (или ngClassEven и ngClassOdd). Затем поместите всю логику для выбора классов CSS в контроллере. Это гораздо проще проверить автоматически.
Marcello Nuccio 10 апр. 2013, в 08:54
0

@MarcelloNuccio, но стоит ли добавлять имена классов в модель? Они принадлежат представлению, модель не должна знать, какие классы CSS использует представление. Что было бы лучше, если бы я мог использовать логическое свойство из модели, например, ng-class="someboolean: 'myCssClass'"
arg20 10 апр. 2013, в 12:34
1

@ arg20 Я сказал, чтобы положить его в контроллере, а не в модели. Это не должно быть проблемой. Тем не менее, в документации сказано: «Результатом оценки может быть строка, представляющая имена классов, разделенные пробелом, массив или карта имен классов с логическими значениями». Это означает, что вы можете использовать "{cssclass: someBoolCheck ()}" в качестве выражения, т.е. вы помещаете класс css в представление и логику в контроллере. Посмотрите на этот jsFiddle для примера.
Marcello Nuccio 10 апр. 2013, в 14:36
0

Отлично. Именно то, что я искал! Спасибо!
incutonez 01 июль 2013, в 13:05

Показать ещё 9 комментариев

13

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

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

Ikrom 14 окт. 2015, в 13:09

11

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

Jan 16 янв. 2013, в 13:52

2

Я пришел к этому вопросу для троичного оператора, но в конце я пошел с фильтром, и это было очень хорошо ... = D
slacktracer 30 окт. 2013, в 17:57

10

Вот он: тройной оператор добавлен в парсер angular в 1.1.5! см. журнал изменений

Вот скрипка, показывающая новый тернарный оператор, используемый в директиве ng-class.

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

lionroots 23 май 2013, в 09:05

10

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

Aleksander Blomskøld 19 май 2013, в 09:52

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>

Кнопка переключает и изменяет заголовок кнопки и показывает/скрывает панель div. См. Plunkr

Zahid Rahman 02 апр. 2016, в 16:43

Ещё вопросы

Weird. Это не очень интуитивно понятно. Интересно, почему это было реализовано таким образом?
Ternary никогда не был реализован, но он просто использует бинарные операторы так, как они работают.
@blesh, AngularJS способствует тестируемости. Шаблоны не должны содержать никакой логики. Тернарный оператор в шаблоне должен быть преобразован в вызов функции контроллера для лучшей тестируемости.
Должны ли приведенные выше примеры использовать ng-style и ng-class? (Я не уверен, когда их нужно использовать).
@Mark, если вы хотите использовать стиль ng, то выражение должно быть равнозначно объекту, ключи которого являются именами стилей CSS, а значения - значениями CSS. Например, ng-style = "{color: $ location.path () == '/ page2' && '#fff' || '# 000'}". Я думаю, что это выглядит немного лучше, так как легче сказать, что вы устанавливаете «цвет».
@MarcelloNuccio, можешь ли ты уточнить это? Я хочу напечатать css-предложения в соответствии с логическим свойством, как бы я в точности реорганизовал это в контроллер? (я нуб, я знаю)
@ arg20 вы должны использовать директиву ngClass (или ngClassEven и ngClassOdd). Затем поместите всю логику для выбора классов CSS в контроллере. Это гораздо проще проверить автоматически.
@MarcelloNuccio, но стоит ли добавлять имена классов в модель? Они принадлежат представлению, модель не должна знать, какие классы CSS использует представление. Что было бы лучше, если бы я мог использовать логическое свойство из модели, например, ng-class="someboolean: 'myCssClass'"
@ arg20 Я сказал, чтобы положить его в контроллере, а не в модели. Это не должно быть проблемой. Тем не менее, в документации сказано: «Результатом оценки может быть строка, представляющая имена классов, разделенные пробелом, массив или карта имен классов с логическими значениями». Это означает, что вы можете использовать "{cssclass: someBoolCheck ()}" в качестве выражения, т.е. вы помещаете класс css в представление и логику в контроллере. Посмотрите на этот jsFiddle для примера.
Отлично. Именно то, что я искал! Спасибо!
Я пришел к этому вопросу для троичного оператора, но в конце я пошел с фильтром, и это было очень хорошо ... = D

Mark Rajcok · Accepted Answer · 2012-08-28T01-58-00.000Z

Обновить: Angular 1.1.5 добавлен тернарный оператор, поэтому теперь мы можем просто написать

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

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

(condition && result_if_true || !condition && result_if_false)
{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>

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

С ng-class существует более простой способ: ng-класс принимает выражение, которое должно оцениваться одним из следующих:

строка имен классов с разделителями пространства
массив имен классов
map/object имен классов для булевых значений.

Пример 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>

Если бы я мог, я бы снова проголосовал за обновление вопроса!
В примере доступа к объектному ключу вы можете пропустить «ложный» ключ, так как в любом случае это пустая строка.
Слово предупреждения, 1.1.5 в настоящее время не является стабильным.
Что делать, если условие изменяется при обновлении модели? Я бы хотел, чтобы ng-style обновлялся, но, похоже, он будет оцениваться только при первой визуализации элемента. (Угловой нуб здесь)
@HartleyBrody, вы, вероятно, изменяете свою модель «за пределами» Angular, поэтому вам нужно вызвать $ apply (), чтобы Angular пересмотрел выражение в стиле ng.
Слишком поздно, но кто-нибудь знает что-то вроде линтера, который можно использовать для таких шаблонов, чтобы запретить эти вещи? (например, установите сложность 1 или 2 или что-то вроде)
Это работает только для класса? А как насчет ui-sref, например?