J'utilise un service JSON pour répertorier les éléments de menu (Liens). Lorsque vous naviguez sur les différents itinéraires / pages, je veux une classe "active" ajoutée au lien actuellement actif (c'est-à-dire que l'utilisateur est activé).
J'ai utilisé ce jsfiddle comme point de départ: http://jsfiddle.net/p3zmr/4/ p> J'ai aussi trouvé Plusieurs réponses ici sur Stackoverflow, mais toutes sont similaires à la solution ci-dessus. P> Mais, cette solution ne fonctionne pas si les liens sont générés via NG-REPEAT: P> <ul class="main-menu">
<li ng-repeat="page in pages">
<a href="/#/{{page.id}}" active-link="active">{{page.name}}</a>
</li>
</ul>
4 Réponses :
La classe NG a été faite pour cela. Consultez les commentaires sur la page Documents angulaires pour NG-Class comme il n'est pas bien documenté.
html pour répéter des liens javascript ceci produira des liens un / deux / trois avec trois en surbrillance dans le rouge Couleur. Voici une jsfiddle:
Votre Jsfiddle ne semble pas fonctionner. La classe "active" n'est ajoutée que sur clic? Essayez de changer de couleur .active sur "vert" et cela ne fonctionne que sur PAGLOAD.
Cela ne fonctionne pas car aucun des trucs de fournisseur d'itinéraires n'est câblé. Ce n'était qu'une démonstration de vous montrer comment y parvenir.
Ah, je pense avoir raté quelques détails lorsque je l'ai essayé, par exemple, mon URL est / # / foo donc j'ai besoin de vérifier l'emplacement.Path () Extrant le "/" Ie
Si tel est le cas, je modifierais simplement des liens pour inclure la / dans l'URL.
$ emplacement.path (). remplacer ("/", ""); . Va lui donner un autre aller.
En tant qu'auteur de votre point de départ, j'ai mis à jour le violon, il devrait donc fonctionner maintenant pour vos URL dynamiques :). Le problème est que la directive lit l'attribut href, avant qu'il ne soit interpolé. Je viens de le changer d'une manière, que le HREF sera lu, après son interpolation.
Un concept de programmation d'agrafage est la séparation des préoccupations. Personnellement, je n'aime pas garder la logique ni les comparaisons de mon point de vue. Je préférerais garder la logique d'entreprise et les comparaisons dans le JavaScript
html javascript
Dupliqué possible de Comment mettre en surbrillance un élément de menu actuel dans AngularJs? < / a>
Je ne le pense pas. La solution nécessaire aux liens doivent être codés durs
Nan. Vous pouvez simplement dire
getclass ('/ # /' + pageId) et ce ne serait pas codé dur.