expressions ng-repeat angulaires en tant que variables

Je suis en train de faire quelque chose comme ceci:

<ul>
    <li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>

Mais parce que le ng-repeat logique est dans la compilation de l'état, de la directive, il traite le {{myRepeatExpression}} comme un string au lieu d'une variable. Ce qui ne fonctionne pas, évidemment.

Est-il une solution de contournement pour qui?

source d'informationauteur Gilad

  1. 11

    Vous pouvez uniquement utiliser et d'expression avec ng-repeat et pas un interpolated valeur.
    Maintenant, dans le but de créer une dynamique reproductible liste, vous pouvez soit essayer:

    1. à l'aide d'une fonction qui retourne la liste de façon dynamique dans la ng-repeat - c'est potentiellement plus cher depuis angulaire besoins à l'appel de la fonction d'abord, puis de déterminer si la collection a changé lors d'une $digest cycle
    2. $watch pour une variable donnée sur l'étendue de provoquer un changement de la liste - potentiellement plus efficace, mais si votre liste dynamique dépend plus d'une variable, il peut obtenir plus de commentaires et peut conduire à des bugs potentiels de l'oubli d'ajouter une nouvelle $watch lorsqu'une nouvelle variable est nécessaire

    Démo plunker

    JS:

    app.controller('MainCtrl', function($scope) {
  var values1 = [{name:'First'}, {name:'Second'}];
  var values2 = [{name:'Third'}, {name:'Fourth'}, {name:'Fifth'}];

  //1. function way
  $scope.getValues = function(id) {
    if(id === 1) {
      return values1;
    }
    if(id === 2) {
      return values2;
    }
  }

  //2. watch way
  $scope.values = undefined;
  $scope.$watch('id', function(newVal) {
    $scope.values = $scope.getValues(newVal);
  });
});

    HTML:

    <!-- Here we pass the required value directly to the function -->
<!-- this is not mandatory as you can use other scope variables and/or private variables -->
<ul>
  <li ng-repeat="v in getValues(id)">{{v.name}}</li>
</ul>
<!-- Nothing special here, plain old ng-repeat -->
<ul>
  <li ng-repeat="v in values">{{v.name}}</li>
</ul>
  2. 2

    ng-repeat accepte uniquement privateur, la syntaxe de l'expression comme dans row in rowsmais rows pourrait être une fonction ou d'une promesse dans votre contrôleur. Cependant, vous devez regarder attentivement les performances ng-repeat ne fonctionne pas bien avec des choses qui changent trop souvent (le redoutable max. 10 itérations d'erreur).

  3. 2

    Vous ne pouvez pas utiliser ng-repeat avec de la ficelle/variable qui doit représenter l'expression directement, mais vous pouvez créer la directive que interpoler/analyser cette valeur et passer à la ng-repeat argument et de recompiler l'élément.

    app.directive('ngVarRepeat',function($compile){
  return {
    priority:1001, //must be higher than 1000 (priority of ng-repeat)
    compile:function($elm,$attrs){

      var expression = $attrs.ngVarRepeat;
      $elm.removeAttr('ng-var-repeat'); //remove attribute so we can recompile it later

      return function(scope,elm,attrs){
        $elm.attr('ng-repeat',scope.$eval(expression));
        $compile($elm)(scope);
      }
    }
  }
})

    Prendre un coup d'oeil à ce plunker: démo plunker accepté de répondre à

    Veuillez également noter, que cette approche devrait causer des troubles dans imbriquée ng-se répète.