Winkel ng-repeat Ausdrücke als Variablen

Question

Ich versuche, so etwas zu tun:

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

Aber weil die ng-repeat Logik in dem Kompilierung Zustand der Richtlinie ist es behandelt die {{myRepeatExpression}} als normale Zeichenfolge statt eine Variable. Was offensichtlich nicht funktioniert.

Gibt es eine Abhilfe dafür?

Answer 1

Sie können nur einen Ausdruck mit ng-repeat und keinen interpolated-Wert verwenden. Um nun eine dynamische wiederholbar Liste zu erstellen, können Sie versuchen, entweder:

1. eine Funktion, die eine Liste zurückgibt dynamisch im ng-repeat - dies ist möglicherweise teurer, da Winkel Bedarf die Funktion aufgerufen wird zuerst dann festzustellen, ob die Sammlung geändert hat, wenn für eine bestimmte Variable auf dem Umfang, die eine Änderung der Liste auslösen einen $digest Zyklus
2. $watch tun - möglicherweise effizienter, aber wenn Ihre dynamische Liste hängt von mehreren variablen kann es ausführlicher erhalten und kann dazu führen, dass potenzielle Fehler vergessen, neue hinzuzufügen $watch, wenn eine neue Variable erforderlich

Demo 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> 

Answer 2

ng-repeat akzeptiert nur proprietäre Ausdruck Syntax wie in row in rows, aber rows könnte eine Funktion oder Versprechen in Ihrem Controller sein. Allerdings müssen Sie die Leistung genau beobachten, da ng-repeat nicht gut mit Dingen funktioniert, die sich zu oft ändern (der gefürchtete Fehler max. 10 Iterationen).

Answer 3

Sie nicht ng-re verwenden können Torf mit Zeichenfolge/Variable, die den Ausdruck direkt darstellen sollte, aber Sie können eine Direktive erstellen, die diesen Wert interpoliert/analysiert und an das Argument ng-repeat übergeben und das Element erneut kompilieren.

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

Werfen Sie einen Blick auf diese Plunker: demo plunker from accepted answer

Bitte beachten Sie auch, dass dieser Ansatz Probleme in verschachtelten ng-Wiederholungen führen sollte.