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

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>

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

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!