CODEWITHSUNDEEP
angularjsif-statementangularjs-ng-repeat
夏期劇場
夏期劇場

Reputation: 18325

AngularJS : IF Statement inside "ng-repeat"?

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.

Upvotes: 6

Views: 19932

Answers (3)

JustOneMoreQuestion
JustOneMoreQuestion

Reputation: 263

<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

Upvotes: 12

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

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>

Upvotes: 2

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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>

Upvotes: 3

Related Questions