Angularjs if-then-else побудова в виразі


109

Чи можу я якось використовувати конструкцію if-then-else (ternary-operator) у виразі angularjs, наприклад, у мене є функція $ range.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

Відповіді:


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>

ОНОВЛЕННЯ: Кутова 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
Саме те, що я шукав дякую, майже використовував фільтр для цього.
Незмінний Цегла

1
@IgorCh: Ви можете оновити прийняту відповідь :)
Răzvan Flavius ​​Panda

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>

Перевага робити це на рівні елементів, як це замість всередині виразу, полягає в тому, що ви можете багато іншого налаштувати стиль та зміст різних варіантів.
Супр

Так, я знаю про цю функціональність, яка могла б допомогти, але я не хочу додавати в документ додаткові дані. але також спасибі
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.