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


109

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

<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 в выражении. Спасибо.


3
Отъездng-switch
NilsH

3
Начиная с версии 1.2 это теперь поддерживается.
nilskp 02

Ответы:


219

Угловые выражения не поддерживают тернарный оператор до версии 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"}}

Нужно ли экранировать &&?
0xcaff

@caffinatedmonkey нет, нельзя. Вы можете (если это возможно для своего проекта) использовать тернарный оператор, как я объяснил в своем ответе на вопрос темы.
Себастьян

@Sebastian Как насчет операторов сравнения <и >как?
0xcaff

@caffinatedmonkey Также нет проблем, {{1> 0? true: false}} или {{1> 0}} как хотите. {{1> 0}} работает также в 1.0.8, но тернарный оператор - нет.
Себастьян

Это по-прежнему отличный ответ, поскольку он работает в настройках компонентов angular-ui (в то время как тернарный оператор по какой-то причине там не работает). Может быть, это поможет кому-то, кто изо всех сил пытается установить параметры angular-ui
Ольга Гнатенко

39

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

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

{{true?true:false}}

По историческим причинам (возможно, в будущем plnkr.co отключится по какой-то причине), вот основной код моего примера:{{true?true:false}}
Себастьян

1
Именно то, что я искал, спасибо, почти использовал для этого фильтр.
Immutable Brick

1
@IgorCh: Возможно, вы захотите обновить принятый ответ :)
Рэзван Флавиус Панда

25

Вы можете легко использовать 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>

Преимущество выполнения этого на уровне элемента, как здесь, а не внутри выражения, заключается в том, что вы можете гораздо больше настраивать стиль и содержимое различных параметров.
Вс,

Да, я знаю об этой функции, это может помочь, но я не хочу добавлять в документ лишний div. но также спасибо
IgorCh

0

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

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

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

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.