Comment déclencher des fonctions jQuery une fois que ng-repeat a fini de remplir une table ?

Déclenchement d'événements après la population ng-repeat

Vous souhaitez exécuter une fonction jQuery sur un div contenant une table remplie à l'aide de ng-repeat, mais ni $(document).ready() ni $scope.$on('$viewContentLoaded', myFunc) ne déclenchent it.

Approche des directives personnalisées

Les directives fournissent un moyen de créer des fonctionnalités personnalisées. Puisqu'il n'y a pas d'événement intégré pour la fin d'une boucle ng-repeat, vous pouvez utiliser une directive pour accomplir cela.

Il y a deux scénarios à considérer :

1. Manipulation à l'échelle de la table : Si vous avez uniquement besoin de styliser ou d'ajouter des événements à l'ensemble de la table, vous pouvez utiliser une directive qui englobe tous les ng-repeat éléments.
2. Manipulation spécifique à un élément : Si vous devez cibler des éléments individuels, vous pouvez utiliser une directive dans le ng-repeat qui agira sur chaque élément après sa création.

Propriétés pour déclencher des événements

De plus, vous pouvez utiliser les propriétés suivantes avec ng-repeat :

• $index : L'index de l'élément actuel.
• $first : Booléen indiquant si l'élément est le premier de la liste.
• $middle : Booléen indiquant si l'élément est au milieu de la liste.
• $last : Booléen indiquant si l'élément est le dernier de la liste. liste.

Exemple

Considérez le code HTML suivant :

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>

Vous pouvez définir des directives pour manipuler les éléments :

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})
.directive('myMainDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('border','5px solid red');
  };
});

Dans cet exemple, myRepeatDirective définit la couleur de chaque élément sur bleu et alerte "je suis le dernier !" pour le dernier élément. Le myMainDirective définit une bordure autour de la table entière.

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!