AngularJs obtenir le comte de l'élément par le nom de classe
Comment puis-je compter élément par le nom de classe dans angularJs?
J'ai essayé avec:
$scope.numItems = function() {
$window.document.getElementsByClassName("yellow").length;
};
Plunkr: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview
OriginalL'auteur Tropicalista | 2013-09-16
Vous devez vous connecter pour publier un commentaire.
Vous avez défini votre fonction correctement, mais fait une erreur en montrant ses résultats: elle doit avoir été...
... au lieu de la plaine
{{numItems}}
. Vous voulez afficher la valeur de retour de la fonction, et non pas la fonction elle-même (qui est vide de sens), c'est pourquoi vous devez suivre la norme JS syntaxe d'un appel de fonction.Notez que vous pouvez envoyer des arguments dans cette expression: par exemple, j'ai réécrit cette méthode comme ceci:
... et puis en fait trois différents compteurs dans le modèle:
Plunker Démo.
Mais voici le problème:
numItems()
conséquence, utilisés dans un point de Vue, est basé sur les DOM de la traversée - en d'autres termes, sur un autre point de Vue. Non seulement cela va à l'encontre Angulaire de la philosophie en général, il a tendance à casser. En fait, il N'pause depuis ce commit, aussi vieux que 1.3.0:Voir, les changements dans les classes sont appliquées après digérer - et c'est après
numItems()
est évaluée, d'où le retard dans la démo mentionné par @Thirumalaimurugan.Un quick-and-dirty solution est d'utiliser un autre attribut pour sélecteur de numItems (dans ce plunker, c'est
data-color
). Mais je vous conseille fortement contre elle. La bonne approche serait d'ajouter les données rendues parnumItems()
-à l'aide de composant dans le modèle. Par exemple:app.js
index.html
Démo.
Ici j'ai (un peu), il fixe. Dans l'ensemble, les OP de l'intention de suivre les changements dans la vision, non pas dans le modèle n'était pas une bonne idée, depuis le début, c'est pourquoi il a été facilement brisée lorsque AngularJS équipe de pilotage optimisé des changements de classe. Je vais mettre à jour ma réponse avec une explication un peu plus tard.
OriginalL'auteur raina77ow