AngularJS : IF Statement inside "ng-repeat"?

Question

I'm using AngularJS v1.2.9.

Inside ng-repeat, how do i use check the value of object and do action based on condition?

In English, something like:

if `X` is not null, then show `X`. Is it possible?

Here's my ng-repeat skeleton:

<li ng-repeat="r in results">
    <div>{{ r.title }}</div>
    <div>{{ r.location }}</div>
    <!--
    if ( r.date!=="null" ) {
        <div>{{ r.date }}</div>
    } else {
        <div>Date not confirmed yet.</div>
    }
    -->
</li>

I need to show r.date if it is not null. If it is null, then i say something else.

Please kindly help. Thanks all.

score 12 · Accepted Answer · edited May 23 '17 at 11:53

12

<li ng-repeat="r in results">
  <!-- If r.date contains a value, show it -->
  <span ng-if="r.date">{{r.date}}</span>
  <!-- If r.date does not contain a value show placeholder text -->
  <span ng-if="!r.date">Date not confirmed yet.<span>
</li>

Also see What does an exclamation mark before a variable mean in JavaScript

edited May 23 '17 at 11:53

Community

1
1

answered Mar 29 '16 at 11:19

JustOneMoreQuestion

263
2
7

1

I liked @PankajParkar's bind more. But as he says, if the placeholder text/content gets large using different tags would probably be preferred. – JustOneMoreQuestion Mar 29 '16 at 11:35
Yes.. that was good.. I mentioned your answer because you had already wrote it & don't wanted to repeat that again.. – Pankaj Parkar Mar 29 '16 at 20:05

Pankaj Parkar · Answer 2 · 2016-03-29T11:22:10.933

3

Update

Question wasn't much clear so here is what you wanted just by having ng-bind directive in place. If the content is bigger then you can switch to the way suggested by @JustOneMoreQuestion below.

<li ng-repeat="r in results" ng-if="r.date">
    <div ng-bind="r.date ? r.date : 'Date not confirmed yet.'"></div>
</li>

You could easily do by using ng-if

<li ng-repeat="r in results" ng-if="r.date">
    <!--
    if ( r.date!=="null" ) {
        {{ r.date }}
    }
    -->
</li>

OR go for a filter which will filter out those will create a collection of element which has date in it.

<li ng-repeat="r in results| filter: { date: '' }">
    <!--
    if ( r.date!=="null" ) {
        {{ r.date }}
    }
    -->
</li>

edited Mar 29 '16 at 11:22

answered Mar 29 '16 at 11:16

Pankaj Parkar

134,766
23
234
299

Thanks for great help! But it is a bit misunderstood from what i want. (Sorry for that) I edited the question just now. Thank you :) – 夏期劇場 Mar 29 '16 at 11:19
@夏期劇場 look at my edit, let me know if still im missing something – Pankaj Parkar Mar 29 '16 at 11:22

score 2 · Answer 3 · answered Mar 29 '16 at 11:26

2

Check this one,

<li ng-repeat="r in results" >
    <div data-ng-if="r.date !== 'null'">
        Your Date
    </div>
    <div data-ng-if="r.date == 'null'">
        Date not confirmed yet
     </div>
 </li>

answered Mar 29 '16 at 11:26

Anil Kumar Ram

1,211
11
14

forgot to remove ' single quote.. you can use data-ng-if="r.date !== null". like this – Anil Kumar Ram Mar 29 '16 at 12:43
`data-ng-if="r.date"` is enough – Pankaj Parkar Mar 29 '16 at 12:49

AngularJS : IF Statement inside "ng-repeat"?

3 Answers3