Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie AngularJS, um den Abschluss des NG-Repeat-Renderings zu überwachen

php中世界最好的语言
Freigeben: 2018-05-09 11:35:40
Original
1626 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie AngularJS verwenden, um den Abschluss des ng-repeat-Renderings zu überwachen. Welche Vorsichtsmaßnahmen gibt es für AngularJS, um den Abschluss des ng-repeat-Renderings zu überwachen? . Das Folgende ist ein praktischer Fall.

Ein bestimmtes Projekt, es gibt ein Listenelement <ul> auf meiner Webseite, der Stil ist wie folgt:

Eigentlich geht es durch Angular – Gebildet durch repeat, lautet der Code in html:

<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>
Nach dem Login kopieren

Neue Listebutton am unteren Rand des Bildes. Nach dem Klicken wird ein neues lists zum arraypush > -Objekt wird die Seite zu diesem Zeitpunkt automatisch gerendert und ein list wird entsprechend wie folgt hinzugefügt: <li>

Beachten Sie, dass

befindet sich immer im MyList1-Zustand (active). Meine Anforderung ist, dass nach dem Hinzufügen von class="active" durch das neue list auf list gesetzt wird, d. h. nach dem Hinzufügen Es wird der folgende Stil angezeigt: active

Zuerst habe ich versucht, ein neues

-Objekt zum button-Array in der Funktion hinzuzufügen, die lists entspricht, und dann use <a href="http://www.php.cn/code/658.html" target="_blank">document<code>push.getElementById ruft das neue list-Objekt ab und Fügt dann ein <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById hinzu, stellt sich heraus, dass das erhaltene <li>-Objekt class="active" ist. Nach der DOM-Suche nach null wird der Grund gefunden: Nach dem Aufrufen des -Arrays Objekt, das Array ändert sich und alle lists werden neu gerendert. Suchen Sie nach dem neu hinzugefügten push-Objekt, nachdem <li> noch nicht gerendert wurde, sodass es nicht abgerufen werden kann. Die Lösung lautet: Verwenden Sie den Befehl push, um zu überwachen, ob DOM gerendert wurde. Rufen Sie das neu hinzugefügte DOM-Objekt ab. Es gibt viele verwandte Inhalte im Internet folgt: AngularJS

myapp.directive('repeatFinish', function ($timeout) {
  return {
    restrict: "C",
    link: function (scope, element, attr) {
      if(scope.$last === true){
        $timeout(function () {
          scope.change_list(element[0]);
        }, 10);
      }
    }
  }
});
Nach dem Login kopieren
ng-repeatDer obige Code erstellt eine Anweisung mit dem Namen <li>. bedeutet, dass die Anweisung in

von repeatFinish platziert wird (im Kamelfall also restrict: "C"). DOM bedeutet, dass es bis zum letzten Objekt gerendert wurde. Führen Sie zu diesem Zeitpunkt die Funktion class aus (im class="repeat-finish" Controller scope.$last === true definiert). Die Funktion besteht darin, das aktuelle change_list Objekt und setzen Sie dann das eingehende -Objekt auf ). , active kann das aktuell gerenderte active-Element direkt abrufen. Beachten Sie, dass ich DOM verwendet und active ausgeführt habe. Ich habe festgestellt, dass element[0] nicht gefunden werden konnte, wenn ich DOM direkt verwendet habe. Ich freue mich auf die Antwort. $timeout10msIch glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! change_listchange_listEmpfohlene Lektüre: DOM

Fallanalyse der Verwendung des Selectpicker-Dropdown-Felds

Wie Vue die dynamische Aktualisierungs-Echarts-Komponente verwendet

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AngularJS, um den Abschluss des NG-Repeat-Renderings zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage