Pregunta Cómo usar ng-if con ng-repeat?


Tengo una configuración de objeto de navegación simple que enumera los elementos de navegación (y si deben aparecer en el navegador principal o no). Sin embargo, parece que cuando trato de mezclar ng-si con ng-repeat, las cosas se desmoronan, pero cuando mezclo ng-show con ng-repeat funciona bien (pero termino con un montón de elementos ocultos que no hago quiero anexado al DOM).

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

Pero lo siguiente no funciona (obsérvese el ng-show es ahora ng-if)

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

El objeto de rutas se ve como

routes: {
    '/home': { label: 'Home', nav: true },
    '/contact': { label: 'Contact', nav: false},
   // etc
}

Recibo el siguiente error cuando trato de usar ng-if:

Error: Directivas múltiples [ngIf, ngRepeat] que solicitan la transclusión en:

Supongo que está tratando de decirme que no puedo declarar su declaración de existencia dos veces. Podría usar ng-if en un elemento interno, pero creo que todavía terminaría con un montón de vacío exterior a etiquetas.


32
2017-10-07 21:47


origen


Respuestas:


Probablemente haya una mejor solución, pero después de leer las respuestas anteriores, puedes intentar crear tu propio filtro personalizado:

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; });
  };
});

Entonces para usarlo:

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

Aquí está el Plunker: http://plnkr.co/edit/srMbxK?p=preview


18
2017-10-07 23:52



En lugar de ng-if deberías usar un filtro (http://docs.angularjs.org/api/ng.filter:filter) en ti ng-repeat para excluir ciertos artículos de su lista.


5
2017-10-07 21:56



También encontré este problema y encontré algunas maneras de resolverlo.

Lo primero que intenté fue combinar ng-if y ng-repeat en una directiva personalizada. Voy a empujar eso a Github pronto, pero es kludgy.

La manera más simple de hacerlo es modificar su route.routes colección (o crear una colección de marcador de posición)

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

y en tu opinión

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

Si necesita que se actualice dinámicamente, solo configure relojes, etc.


2
2017-10-07 21:55



¿Qué tal este one-line usando $ filtro:

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

1
2017-09-22 13:04



Debe usar un filtro en su ng-repeat En lugar de usar ng-if.

Esto debería funcionar:

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

Advertencia: en realidad no he probado este código.


0
2017-10-07 22:02