Конструкция Angularjs if-then-else в выражении

Могу ли я как-то использовать конструкцию if-then-else (тернарный оператор) в выражении angularjs, например, у меня есть функция $scope.isExists(item), которая должна возвращать логическое значение. Я хочу что-то вроде этого,

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

Я знаю, что могу использовать функцию, которая возвращает строку, меня интересует возможность использования конструкции if-then-else в выражении. Спасибо.


javascript if-statement angularjs angularjs-ng-repeat ternary-operator
person IgorCh    schedule 16.05.2013    source источник
comment
Ознакомьтесь с ng-switch.   -  person NilsH    schedule 16.05.2013
comment
Начиная с версии 1.2 это теперь поддерживается.   -  person nilskp    schedule 03.10.2014

Ответы (5)


arrow_upward
221
arrow_downward

Выражения Angular не поддерживают тернарный оператор до версии 1.1.5, но его можно эмулировать следующим образом:

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

Итак, например, что-то вроде этого будет работать:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

ОБНОВЛЕНИЕ: в Angular 1.1.5 добавлена ​​поддержка тернарных операторов:

{{myVar === "two" ? "it's true" : "it's false"}}
person Andre Goncalves    schedule 16.05.2013
comment
Нужно ли экранировать &&? - person 0xcaff; 16.03.2014
comment
@caffinatedmonkey нет, не надо. Вы могли бы (если это возможно для вашего проекта) использовать тернарный оператор, как я объяснил в своем ответе на вопрос темы. - person Sebastian; 24.04.2014
comment
@Sebastian А как насчет < и > в качестве операторов сравнения? - person 0xcaff; 26.04.2014
comment
@caffinatedmonkey Также нет проблем, {{1›0?true:false}} или {{1›0}} как вам нравится. {{1›0}} также работает в версии 1.0.8, а тернарный оператор — нет. - person Sebastian; 28.04.2014
comment
Это по-прежнему отличный ответ, поскольку он работает внутри настроек компонентов angular-ui (в то время как тернарный оператор по какой-то причине там не работает). Может быть, это поможет кому-то, пытающемуся установить параметры angular-ui - person Olga Gnatenko; 25.07.2014

arrow_upward
40
arrow_downward

Вы можете использовать тернарный оператор, начиная с версии 1.1.5 и выше, как показано в этом небольшом plunker ( пример в 1.1.5):

По историческим причинам (может быть, plnkr.co по какой-то причине выйдет из строя в будущем) вот основной код моего примера:

{{true?true:false}}
person Sebastian    schedule 20.02.2014
comment
По историческим причинам (может быть, plnkr.co по какой-то причине свалится в будущем) вот основной код моего примера: {{true?true:false}} - person Sebastian; 24.04.2014
comment
Именно то, что я искал, спасибо, почти использовал фильтр, чтобы сделать это. - person Immutable Brick; 22.05.2014
comment
@IgorCh: Возможно, вы захотите обновить принятый ответ :) - person Răzvan Flavius Panda; 28.05.2014

arrow_upward
25
arrow_downward

Вы можете легко использовать ng-show, например:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

Для более сложных тестов вы можете использовать операторы ng-switch:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>
person Mickael    schedule 16.05.2013
comment
Преимущество выполнения этого на уровне элемента, а не внутри выражения, заключается в том, что вы можете гораздо больше настраивать стиль и содержимое различных параметров. - person Supr; 16.05.2013
comment
Да, я знаю об этой функции, она может помочь, но я не хочу добавлять в документ лишний div. но также спасибо - person IgorCh; 16.05.2013

arrow_upward
0
arrow_downward

Это можно сделать в одну строку.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Использование в теге td:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
person Consule    schedule 17.04.2019

arrow_upward
0
arrow_downward

Я пытаюсь проверить, существует ли ключ в массиве угловым способом, и попал сюда по этому вопросу. В моем Angularjs 1.4 тернарный оператор работал, как показано ниже.

{{ CONDITION ? TRUE : FALSE }}

поэтому для существования ключа массива я сделал простую проверку JS

Решение 1: {{ array['key'] !== undefined ? array['key'] : 'n/a' }}

Решение 2: {{ "key" in array ? array['key'] : 'n/a' }}

person Govind Totla    schedule 21.08.2020