AngularJS: for loop and nested if

Question

I want to have something like the following HTML code using AngularJS:

<p class="itemsperpage">Items per page: <span>20</span> <span><a href="#">40</a></span> <span><a href="#">60</a></span> <span><a href="#">View all</a></span></p>

Where 20 is wrapped only by a , because is the current active element.

Now using AngularJS, how can I have something like:

var itemsPerPage = [20,40,60];
...
<p class="itemsperpage">Items per page:
    <span ng-repeat='i in itemsPerPage'>
        // here should print {{ i }} for the current active
        // <a href="#">{{ i }}</a> for the elements not active
    </span>
    <span><a href="#">View all</a></span>
</p>

Is it possible to do something like this using AngularJS?

floribon · Accepted Answer · 2015-04-30 22:35:07Z

2

You could use ng-if like this:

<span ng-repeat='i in itemsPerPage'>
    <span ng-if="active === i">{{i}}</span>
    <a    ng-if="active !== i" href="#">{{i}}</a>
</span>

Simply keep the active item in $scope.active, for instance

$scope.active = 20;

answered Apr 30, 2015 at 22:35

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

filippo.derosa84 Over a year ago

This works even if will add an extra <span></span> inside the <span> that contains the ng-repeat.

floribon Over a year ago

If you really want to get rid of that you'd need a custom directive, so a more complex code. It is better it you can accomodate with it.

Pankaj Parkar · Accepted Answer · 2015-04-30 22:38:06Z

1

Assuming first element would be active. Or for checking condition of 20, you could replace $first with 20

Markup

<p class="itemsperpage">Items per page:
    <span ng-repeat='i in itemsPerPage'>
        <a href="#" ng-if="$first" ng-class="{active: $first }">{{ i }}</a> 
        <span href="#" ng-if="!$first">{{ i }}</span> 
    </span>
    <span><a href="#">View all</a></span>
</p>

edited Apr 30, 2015 at 22:38

answered Apr 30, 2015 at 22:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

AngularJS: for loop and nested if

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related