So bestätigen Sie, dass das ng-repeat-Rendering abgeschlossen ist

Dieses Mal zeige ich Ihnen, wie Sie bestätigen können, dass das NG-Repeat-Rendering abgeschlossen ist, und welche Vorsichtsmaßnahmen gelten, um zu bestätigen, dass das NG-Repeat-Rendering abgeschlossen ist. Hier ist ein praktischer Fall sehen.

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>

Neue Listebutton am unteren Rand des Bildes. Nach dem Klicken wird ein neues lists zum Arraypush >-Objekt, die Seite wird zu diesem Zeitpunkt automatisch gerendert und ein list wird entsprechend ebenfalls hinzugefügt, wie folgt: <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 sein: active

Zuerst habe ich versucht, ein neues

-Objekt zum button-Array in der Funktion hinzuzufügen, die lists entspricht, und Verwenden Sie dann <a href="http://www.php.cn/code/658.html" target="_blank">document<code>push.getElementById, um das neue list-Objekt abzurufen. und dann ein <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById hinzufügt, 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 zum Überwachen den Befehl <a href="http://www.php.cn/angularjs/angularjs-examples.html" target="_blank">AngularJS<code>push 🎜 >Ob das Rendering abgeschlossen ist, holen Sie sich das neu hinzugefügte DOM-Objekt. Auf dieser Website gibt es viele verwandte Inhalte. Der Code lautet wie folgt: DOM

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

<a href="http://www.php.cn/angularjs/angularjs-examples.html" target="_blank">AngularJS</a>Der obige Code Erstellt ein Objekt mit dem Namen ng-repeat Anweisung. <li> bedeutet, dass die Anweisung in von

platziert wird (in Kamelfallform, d. h. repeatFinish). restrict: "C" bedeutet, dass das letzte Objekt vorhanden ist gerendert und die DOM-Funktion (definiert im -Controller class, die Funktion besteht darin, das aktuelle class="repeat-finish"-Objekt scope.$last === true abzubrechen und dann das eingehende change_list-Objekt auf zu setzen), kann das aktuell gerenderte activeElement direkt abrufen. Beachten Sie, dass ich active verwendet und DOM ausgeführt habe. Ich habe festgestellt, dass active nicht gefunden werden konnte, wenn ich element[0] direkt verwendet habe. Ich freue mich auf die Antwort. DOM$timeoutIch 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! 10mschange_listEmpfohlene Lektüre: change_listDOM

Vue.js+Flask zum Erstellen einer Single-Page-App (mit Code)

Nicht Verwendete Zusammenfassung der Erkennungsmethoden für Vue-Code-Spezifikationen

Das obige ist der detaillierte Inhalt vonSo bestätigen Sie, dass das ng-repeat-Rendering abgeschlossen ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!