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

triggers an unexpected error in console.log

Setting up Babel to effectively function across multiple directories

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

Adding div elements using checkbox switch

Exploring the integration of ng-csv with Firebase data in an AngularJS project

Is the presence of an excessive number of arguments in the object that includes functions an instance

Issue with iframe's size not displaying correctly

Exploring the concept of promises in node.js for recursive functions

What methods can be used to troubleshoot an issue of an AngularJS function not being called

Can anyone explain why I am having trouble loading JavaScript files into a different HTML file?

Positioning the filters in jQuery Datatables

What is the best way to access the inner html of every cell within a table row that I have selected?

Use Javascript to display an image based on the date, otherwise hide the div

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

Effortlessly initiate the consecutive playback on SoundCloud

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

How can I store a value or text to track view counts or a counter efficiently?

Flask fails to recognize JSON data when transmitted from Nodejs

Issue with Sequential Drop Down List Functionality in ASP.Net MVC View Page

Deleting table rows after an object has been removed in AngularJSNote: Using