Comment lier des objets complexes avec des radios et des cases à cocher dans AngularJS?
Dire que nous avons un ensemble de projets exposés par le Projet de service:
{ id: '123', name: 'Yeoman', watchers: '1233', ... }
{ id: '123', name: 'Grunt', watchers: '4343', ... }
Ensuite, nous avons un formulaire pour choisir votre favori projet:
Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
%input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}
Ce met de choix.favoriteProject à la valeur de l'id du projet choisi. Souvent, nous avons besoin d'accéder à l'objet, et non pas juste l'id:
John's favorite project:
{{Project.get(data.favoriteProject).name}}
Ce que je suis à la recherche d'un moyen de lier les postes de radio et des cases à cocher directement à l'objet lui-même, pas l'id, de sorte que nous pourrions faire
John's favorite project:
{{data.favoriteProject.name}}
à la place. C'est possible avec les sélectionner via la directive ng-options, mais comment peut-on le faire avec des radios et des cases à cocher? Je voudrais encore utiliser l'id correspondant au lieu des références, si possible.
Pour clarifier, voici un exemple de ce que je suis à la recherche d'
Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
%input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}
Il dit: "s'il vous Plaît la liaison de données.favoriteProject à la concrétisation du projet objet et utiliser l'id de vérifier s'ils correspondent (au lieu de références)".
OriginalL'auteur randomguy | 2013-01-15
Vous devez vous connecter pour publier un commentaire.
[Mise à jour]
J'ai complètement changé ma réponse après la découverte de la
ngValue
directive, qui semble être sans-papiers. Il vous permet de lier des objets au lieu de simplement les chaînes de valeurs pour lesngModel
sur le bouton radio à des intrants.Il utilise des références pour vérifier plutôt que de simplement l'Id, mais je pense que dans la plupart des cas, c'est ce que les gens recherchent. Si vous ne très strictement ne voulez correspondance basée sur des Id, vous pouvez utiliser le [de l'Ancien Réponse], ci-dessous, ou mieux encore, il suffit de créer une fonction (par exemple,
projectById(projectId)
que vous pouvez utiliser pour la recherche d'un projet en fonction de son ID.J'ai mis à jour le JSFiddle à démontrer: http://jsfiddle.net/BinaryMuse/pj2GR/
[De L'Ancien Réponse]
Peut-être vous pouvez utiliser le
ng-change
attribut du bouton radio directive, d'atteindre ce que vous voulez. Considérer ce HTML:Vous pouvez également appeler une fonction à l'intérieur de
ng-change
, par exemplesetfavoriteProject(project)
--mais je n'ai pas à le faire ici par souci de simplicité.Ici est un travail jsFiddle pour démontrer la technique: http://jsfiddle.net/BinaryMuse/pj2GR/7/
Pourquoi utiliser des projets[$index] au lieu de simplement l'objet du projet?
J'ai fait ce refactoring dans le jsFiddle, mais il a oublié de mettre à jour le post. Merci!
Il y a un léger problème avec les cases à cocher avec cette approche. ng-changement des feux sur cochez ET décochez alors la favoriteProject obtient ensemble, même si nous sommes en décochant l'option.
Intéressant de noter que la ng-model est plus ou moins un jeter ici.
OriginalL'auteur Michelle Tilley
Pas de ng-changement nécessaire (et je ne suis pas sûr, si c'est une bonne pratique pour écrire inline-code comme celui-ci. D'autre part angulars directives ne sont pas trop loin d'épargne). Pourquoi ne pas tout simplement faire quelque chose comme ceci (fonctionne avec ng-repeat):
Violon:
http://jsfiddle.net/JohannesJo/VeZxh/3/
Code:
Edit: j'ai peut-être convient de mentionner que cela ne fonctionne pas pour les cases à cocher, que la valeur soit vrai ou faux. Également un modèle partagé conduira à toutes les cases soit activée ou désactivée en même temps.
ng-value
solution, il est assez soupleOriginalL'auteur hugo der hungrige