Building conditionals in AngularJS expressions using if-then-else syntax

Question

Building conditionals in AngularJS expressions using if-then-else syntax

Is there a way to incorporate the ternary-operator (if-then-else construction) in an angularjs expression? For example, I have a function $scope.isExists(item) that should return a boolean value. I would like to do something like this:

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

I understand that I can use a function that returns a string, but I am curious about the possibility of using if-then-else construction within an expression. Thank you.

javascript angularjs if-statement angularjs-ng-repeat ternary-operator

Answer 1

Answer №1

Before version 1.1.5 of Angular, expressions did not support the ternary operator. However, you could emulate it using this syntax:

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

For example, you could use something like this:

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

UPDATE: Starting from Angular 1.1.5, ternary operators are now supported natively:

{{myVar === "two" ? "it's true" : "it's false"}}

Answer 2

Before version 1.1.5 of Angular, expressions did not support the ternary operator. However, you could emulate it using this syntax:

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

For example, you could use something like this:

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

UPDATE: Starting from Angular 1.1.5, ternary operators are now supported natively:

{{myVar === "two" ? "it's true" : "it's false"}}

Answer 3

Answer №2

If you're using version 1.1.5 or later, you have the option to utilize the ternary operator, as shown in this small example on Plunker (using version 1.1.5):

Just in case of any issues with plnkr.co in the future, here is the main code snippet from my example:

{{true?true:false}}

Answer 4

If you're using version 1.1.5 or later, you have the option to utilize the ternary operator, as shown in this small example on Plunker (using version 1.1.5):

Just in case of any issues with plnkr.co in the future, here is the main code snippet from my example:

{{true?true:false}}

Answer 5

Answer №3

One way to utilize ng-show is by implementing it like this:


    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isAvailable(item)">In stock</div>
        <div ng-show="!isAvailable(item)">Sorry, out of stock</div>
    </div>

If the conditions are more intricate, you can make use of ng-switch statements such as this:


    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isAvailable(item)">
            <span ng-switch-when="true">Item Available</span>
            <span ng-switch-default>Sorry, out of stock</span>
        </div>
    </div>

Answer 6

One way to utilize ng-show is by implementing it like this:


    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isAvailable(item)">In stock</div>
        <div ng-show="!isAvailable(item)">Sorry, out of stock</div>
    </div>

If the conditions are more intricate, you can make use of ng-switch statements such as this:


    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isAvailable(item)">
            <span ng-switch-when="true">Item Available</span>
            <span ng-switch-default>Sorry, out of stock</span>
        </div>
    </div>

Answer 7

Answer №4

Complete this task with just one line of code.

{{corretor.isAdministrador && 'YES' || 'NO'}}

If you want to use it in a td tag:

<td class="text-center">{{corretor.isAdministrador && 'Yes' || 'No'}}</td>

Answer 8

Complete this task with just one line of code.

{{corretor.isAdministrador && 'YES' || 'NO'}}

If you want to use it in a td tag:

<td class="text-center">{{corretor.isAdministrador && 'Yes' || 'No'}}</td>

Answer 9

Answer №5

When looking for a way to determine if a key exists in an array using Angular, I came across this question. In AngularJS 1.4, the ternary operator functioned as follows:

{{ CONDITION ? TRUE : FALSE }}

Therefore, to check if the array key exists, I performed a simple JavaScript check.

Solution 1:

{{ array['key'] !== undefined ? array['key'] : 'n/a' }}

Solution 2:

{{ "key" in array ? array['key'] : 'n/a' }}

Answer 10

When looking for a way to determine if a key exists in an array using Angular, I came across this question. In AngularJS 1.4, the ternary operator functioned as follows:

{{ CONDITION ? TRUE : FALSE }}

Therefore, to check if the array key exists, I performed a simple JavaScript check.

Solution 1:

{{ array['key'] !== undefined ? array['key'] : 'n/a' }}

Solution 2:

{{ "key" in array ? array['key'] : 'n/a' }}

Building conditionals in AngularJS expressions using if-then-else syntax

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implementing a delay of X seconds after a click event in JQuery: A step-by-step guide

Testing Angular services by injecting dependencies

Exploring the world of AngularJS: delving into $http requests, navigating

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

How can the node version be set globally in NVM?

Executing requests asynchronously in AngularJS in a sequential manner

The default export (imported as 'Vue') could not be located within the 'vue' module in Vue 3 and Laravel

Azure webhosting blocks the use of AJAX calls

The issue with Lodash isEqual arises from the constructor specified by Angular

How can one break down enum values in typescript?

Attempting to utilize the JavascriptExecutor for button testing, however encountering an error message stating 'Unexpected keyword or identifier'

What happens to the content within a <textarea> element if it is not enclosed between the opening and closing tags?

Is it possible to utilize both body-parser and Formidable simultaneously?

What are the best practices for creating a contemporary website that functions effectively on IE7?

Having trouble passing parameters in a Node.js express POST request?

Database-Driven Ajax Information Display

Keeping an object in a multidimensional array based on its ID in Angular 4/Ionic 3 without removing it

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

Using JavaScript and HTML, create a click event that triggers a drop-down text

Troubleshooting: Error in angular JavaScript due to minification: $injector:modulerr Module Error