Question

123

How to use ng-if with ng-repeat?

rated 0 times [ 127] [ 4] / answers: 1 / hits: 40087 / 11 Years ago, mon, october 7, 2013, 12:00:00

I have a simple nav object setup that lists the nav items (and whether they should appear in the primary nav or not). It seems though when I try to mix ng-if with ng-repeat, things fall apart, but when I mix ng-show with ng-repeat it works fine (but I end up with a bunch of hidden elements that I don't want appended to the DOM).

   <section class=nav>

        <a  ng-repeat=(key, item) in route.routes

            ng-href={{key}}

            ng-show=item.nav

        >

                {{item.label}}

        </a>

    </section>

But the following doesn't work (note the ng-show is now ng-if):

    <section class=nav>

    <a  ng-repeat=(key, item) in route.routes

        ng-href={{key}}

        ng-if=item.nav

    >

            {{item.label}}

    </a>

</section>

The routes object looks like

routes: {

    '/home': { label: 'Home', nav: true },

    '/contact': { label: 'Contact', nav: false},

   // etc

}

I receive the following error when trying to use ng-if:

Error: Multiple directives [ngIf, ngRepeat] asking for transclusion on:

I guess it's trying to tell me that I can't state it's declaration for existing twice. I could use ng-if on an inner element, but I think I would still end up with a bunch of empty outer a tags.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sidneyh

Add To Favorites

Follow

Total Points: 118

Total Questions: 108

Total Answers: 105

Location: Mali

Member since Fri, Jun 18, 2021

3 Years ago

sidneyh questions

1 Next.js, redirect to 404 page inside getServerSideProps

Tue, Jun 7, 22, 00:00, 2 Years ago

1 How to generate a UUID in NextJs?

Wed, Apr 13, 22, 00:00, 2 Years ago

1 Can electronjs be used for websites

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to change scroll speed to be smooth?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Can not pass date to nivo line chart

Fri, Apr 24, 20, 00:00, 4 Years ago

View All

answered 11 Years ago raymondorlandok · Accepted Answer

There's probably a better solution, but after reading the replies above, you can try making your own custom filter:

angular.module('yourModule').filter('filterNavItems', function() {

  return function(input) {

    var inputArray = [];



    for(var item in input) {

      inputArray.push(input[item]);

    }



    return inputArray.filter(function(v) { return v.nav; });

  };

});

Then to use it:

<section class=nav>

    <a  ng-repeat=(key, item) in routes | filterNavItems

        ng-href={{key}}>

            {{item.label}}

    </a>

</section>

Here's the Plunker: http://plnkr.co/edit/srMbxK?p=preview