Lade Daten von Helfern vor ng-Klasse Rendern

Question

Ich arbeite an einem Projekt mit Meteor und AngularJs.

Ich habe einige Daten mithilfe von Helfern abgerufen, und dann habe ich ng-repeat verwendet, um sie anzuzeigen.

Ich verwende Checkliste-Modell (http://vitalets.github.io/checklist-model/), um die Liste der Checkbox-Optionen zu erhalten.

<li ng-repeat="t in types"> 
    <div ng-class="nametagClass(t)">{{t.name}}</div> 
    <input type="checkbox" data-checklist-value="t" 
     data-checklist-model="chosenTypes" class="sub-checkbox" /> 
</li> 

hier ist die ng-Klasse Funktion:

$scope.nametagClass=function(type){ 
      if($scope.chosenTypes.indexOf(type)>-1){ 
       return "nametag active-nametag"; 
      } 

      return "nametag"; 
     } 

Das Problem ist, wenn die ng-Klasse die Funktion aufruft, werden die Daten aus chosenTypes noch nicht geladen, so die geprüften Elemente don Erhalte nicht die Klasse "active-nametag". (Wenn die Daten geladen werden und ein Element überprüft wird, ändert sich die Klasse jedoch problemlos)

Wie kann ich den Funktionsaufruf ng-class nach dem Laden der Daten verzögern?

Answer 1

einfach ein ng-if in äußeren Elemente wie diese

<li ng-if="types" ng-repeat="t in types"> 
    <div ng-class="nametagClass(t)">{{t.name}}</div> 
    <input type="checkbox" data-checklist-value="t" data-checklist-model="chosenTypes" class="sub-checkbox" /> 
</li> 

Answer 2

ngIf wäre eine Option hinzufügen. Ich denke, dass Sie auch ngCloak verwenden können:

Die ngCloak Richtlinie kurz durch den Browser in seiner rohen (kompilierten) Form angezeigt wird, um die Winkel HTML-Template zu verhindern, verwendet wird, während die Anwendung geladen wird.