Comment utiliser AngularJS pour surveiller l'achèvement du rendu ng-repeat

Cette fois, je vais vous montrer comment utiliser AngularJS pour surveiller l'achèvement du rendu ng-repeat. Quelles sont les précautions pour qu'AngularJS surveille l'achèvement du rendu ng-repeat. . Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

Un certain projet, il y a un élément de liste <ul> dans ma page Web, le style est le suivant :

En fait, il passe par Angular - Formé par repeat, le code dans html est :

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

Créer une nouvelle liste button en bas de l'image. Après avoir cliqué, une nouvelle liste sera ajoutée à la. lists arraypush list objet, la page sera automatiquement rendue à ce moment-là, et un <li> sera également ajouté en conséquence, comme suit :

Notez que MyList1 est toujours dans l'état active (class="active"), mon exigence est qu'après avoir ajouté à list, définissez le nouveau list sur active, c'est-à-dire , après l'avoir ajouté, il deviendra le style suivant :

Dans un premier temps j'ai essayé d'ajouter un nouvel objet button au tableau lists dans la fonction correspondant à push, puis utilisez <a href="http://www.php.cn/code/658.html" target="_blank">document<code>list.getElementById pour obtenir le nouveau <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById objet, puis ajoute un <li>, et il a été constaté que l'objet class="active" obtenu était DOM Après null recherché , la raison a été trouvée : après être allé au array objet, le tableau a changé et tous les lists seraient restitués, recherchez l'objet push nouvellement ajouté immédiatement après que <li> soit terminé push n'a pas encore été rendu, donc il. ne peut être obtenu. La solution est la suivante : utilisez la commande DOM pour vérifier si DOM a été rendu. Une fois le rendu terminé, récupérez l'objet AngularJS nouvellement ajouté. Il existe de nombreux contenus associés sur Internet. suit : ng-repeat<li>

Le code ci-dessus crée une commande nommée

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

signifie que la commande est placée dans repeatFinish de restrict: "C" (sous forme de chameau, c'est-à-dire ). DOM signifie qu'il a été rendu. Le dernier objet, exécute cette fois la fonction class (définie dans le class="repeat-finish" contrôleur scope.$last === true, la fonction est d'annuler l'change_list objet , puis définissez l'objet entrant sur ), active peut directement obtenir l'élément active actuellement rendu. Notez que j'ai utilisé DOM et exécuté active après element[0]. J'ai découvert que DOM ne pouvait pas être trouvé si j'utilisais $timeout directement. La raison est inconnue. 10mschange_listJe pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! change_listDOMLecture recommandée :

Analyse de cas d'utilisation de la liste déroulante selectpicker

Comment Vue utilise le composant Echarts d'actualisation dynamique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!