如何将 ng-if 与 ng-repeat 一起使用？

Question

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.

Answer 1

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

Answer 2

而不是ng-if你应该在你的ng-repeat上使用过滤器（ http://docs.angularjs.org/api/ng.filter:filter ）来从你的列表中排除某些项目。

Answer 3

I ran into this problem as well, and found a couple ways to solve it.

The first thing I tried was to combine ng-if and ng-repeat into a custom directive. I'll push that up to github sometime soon, but it's kludgy.

The simpler way to do it is to modify your route.routes collection (or create a placeholder collection)

$scope.filteredRoutes = {};
angular.forEach($scope.route.routes, function(item, key) {
    if (item.nav) { $scope.filteredRoutes[key] = item; }
};

and in your view

...
<a  ng-repeat="(key, item) in filteredRoutes"
...

If you need it to be dynamically updated, just set up watches, etc.

Answer 4

How about this one-liner using $filter :

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});

Answer 5

You should use a filter in your ng-repeat instead of using ng-if .

This should work:

<section class="nav">
    <a  ng-repeat="(key, item) in route.routes | filter:item.nav"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

Warning: I haven't actually tested this code.