Grille angulaire de l'interface utilisateur cliquez sur la rangée
J'ai une liste d'éléments dans un Angulaire de l'INTERFACE utilisateur de la Grille. Lorsque je clique sur une ligne, je veux être redirigé vers une autre page. (En d'autres termes, chaque ligne de la grille sera un lien.)
J'imagine que ce doit être une volonté commune, bien que je n'ai pas vraiment vu de toute la documentation sur la façon de le faire. Ce qui est une bonne façon d'accomplir cette?
source d'informationauteur Jason Swett
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la réponse moi-même. Voici mon contrôleur (ES6):
Et voici ma ligne de modèle (Jade):
Et en bonus, voici ma feuille de style (SCSS). J'ai pensé qu'il serait judicieux de mettre en surbrillance la ligne sous le curseur et utilisez un
pointer
curseur pour la rendre plus claire que les lignes sont cliquables.Voici la solution que j'ai utilisée.
https://stackoverflow.com/a/32815458/2452630
La question telle que je la comprends: en cliquant sur une ligne dans un Angulaire de l'INTERFACE utilisateur de la Grille devrait aboutir à la navigation liée à la page (c'est à dire la ligne devrait se comporter comme un lien). Par exemple, une liste de contacts sont affichés dans la grille, et en cliquant sur une ligne vous amène à une page contact.
Bravo à l'OP pour répondre à sa propre question d'une manière innovante. Cependant, je préfère cette réponse car il ne nécessite pas la création d'une ligne personnalisée modèle. J'ai étoffé un peu plus, que l'OP n'a pas l'air satisfait avec Kathir l'exemple.
Tout d'abord, comprendre que le code suivant définit une fonction d'écoute, chaque fois que la ligne.isSelected des modifications de la propriété:
I. e. chaque fois qu'une ligne est cliqué, la fonction sera appelée. Remarque le
row
paramètre passé à la fonction, qui peut être utilisé pour accéder à l'entité qui la ligne représente. Par exemple, si une ligne représente une entité contact, alors vous pouvez accéder à lacontactId
propriété de la ligne/de l'entité qui a été sélectionné. L'exemple suivant utilise l'INTERFACE utilisateur du Routeur$state
service pour accéder à une page contact, en passant lacontactId
obtenu à partir de larow.entity
propriété:Noter que le
$scope
objet est nécessaire pour être transmis, même si vous utilisezController as
de la syntaxe. Reportez-vous à cette l'article surController as
syntaxe.Pour un exemple complet d'utilisation de la Machine (fichier de références omises par souci de concision):
http://plnkr.co/edit/EO920wsxuqr3YU8931GF?p=preview