Réglage dynamique ng-les noms de modèle dans AngularJS
Il y a des questions similaires ici et ici, bien que mon cas d'utilisation est un peu différente.
J'ai un objet appelé uniqueLists
qui ressemble à ceci:
$scope.uniqueLists - {
name: [
'string1',
'string2',
'string3'
//Lots of strings
],
Category: [
'string1',
'string2',
'string3'
//Lots of strings
],
designer: [
'string1',
'string2',
'string3'
//Lots of strings
]
}
Je suis en train de construire une fonction de recherche de cette liste. Actuellement, je peut afficher tous les éléments de la liste des cases à cocher sur la page comme ceci (le code suivant utilise Jade
moteur de template pour le Nœud/ExpressJS, il est assez facile à comprendre, même si vous n'êtes pas familier avec elle. Indent == nœud enfant de la ligne du dessus)
div(class="searchNav")
p(ng-repeat="param in searchParams") {{param[0] + ' = ' + param[1]}}
div.row-fluid(ng-repeat="(key,val) in uniqueLists")
form(ng-model="???") {{key}}
label.checkbox(ng-repeat="value in val")
input(type="checkbox", ng-model="?????")
{{value}}
La seule partie que je vais avoir des problèmes avec, est le ng-model
de ma forme et de cases à cocher. Je veux le form
's ng-model == {{key}}
. J'ai essayé de réglage mais il casse Angulaire. J'ai aussi essayé de ng-model='uniqueLists[index][0]'
mais, encore une fois, Angulaire ne pas analyser cette et fait tout toute forme de modèle de la chaîne de uniqueLists[index][0]
.
Même chose avec le input
cases à cocher, je veux leur ng-model="{{value}}"
. Est-il un moyen de le faire dans mon contrôleur, peut-être? Je ne peux pas penser à quelque chose qui va travailler à l'intérieur de ng-repeat
.
Une petite remarque à quelqu'un qui trébuche sur cette question
Comme vous le verrez dans la réponse/violon-dessous, lorsque vous faites référence à l'objet/positions dans un ng-model
ils ne sont pas rendus en leurs noms corrects dans les DOM, mais ils semblent travailler avec Anguleux comme s'ils l'étaient.
Par exemple, dans le code ci-dessus, le réglage de ng-model="uniqueLists[key][val]"
rend dans les DOM comme ng-model="uniqueLists[key][val]"
, mais se comporte comme si elle ng-model="uniqueLists[name][string1]"
.
Semble être un étrange caprice du moment cinétique, ce trébuché moi parce que j'ai été vérifier le ng-model
noms dans mon navigateur avant de le connecter à mon contrôleur, et quand j'ai vu que c'était pas de l'analyse de l'objet pour les valeurs correctes je suppose qu'il ne fonctionnait pas.
L'exemple que j'ai donné était juste de l'espace réservé, les valeurs de y sont tous uniques (d'où le nom de
uniqueLists
!). Ce sont des cases à cocher, et je souhaite à chacun d'avoir une ng-model
un nom qui fait référence dans le texte de la case de l'étiquette. C'est parce qu'il fait partie d'une recherche, j'ai les paramètres de recherche dans mon contrôleur, et je veux les cases où ils visent à être "cochées". Un sens? Comme si vous la recherche pour "Bonjour", "Test1" et "Test2", sur la page de résultats les cases à cocher avec ces chaînes seraient vérifiées.double possible de Comment puis-je définir un modèle dynamique nom dans AngularJS?
OriginalL'auteur JVG | 2013-07-28
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas encore totalement sûr que j'ai compris tout ton problème, mais je vais quand même vous donner ce code : http://jsfiddle.net/DotDotDot/7AU6A/1/
Pour expliquer un peu, j'ai utilisé un peu modifié les données de l'échantillon (dans l'ordre d'avoir chaînes uniques), et au lieu de créer un modèle tout simplement égal à un définies {{value}} j'ai mis tous les modèles dans un objet, de sorte que vous pouvez facilement aller à l'objet[key][valeur] (dans votre cas, il serait quelque chose comme objet['nom']['mot1']) et j'ai associé ces valeurs dans les cases. La seule chose que j'ai eu à faire est de créer à partir de l'échantillon de données de l'objet, de sorte qu'il oblige le contrôleur d'analyser toutes les données une seule fois.
C'est très siple quand vous le voyez en action (les valeurs sont affichées au bas du violon). Disons que vous cliquez sur la case à cocher nom=> mot2, la valeur de l'objet['nom']['mot2'] correspond à l'état de la case à cocher, qui sera automatiquement regardé par la ng-model.
Quand vous avez cela, il est assez facile de modifier chaque case avec votre contrôleur, j'ai donc ajouté un peu de recherche de la fonction, afin de le montrer en action, vous pouvez rechercher une liste de mots séparés par un espace dans la zone de recherche, puis en cliquant sur la recherche permettra de vérifier la correspondance des cases à cocher
Sur le code HTML côté n'est pas une grosse modification (désolé, je ne suis pas familier avec vos modèles, il sera directement en HTML)
Et sur le contrôleur de côté, c'est comment j'ai initialiser les modèles :
La dernière partie, la fonction de recherche n'est faite de boucles d'itérer tous à la recherche de modèle, de valeurs, je pense que c'est ce que vous aurez à modifier pour correspondre à votre propre recherche contrôleur de
Est que ce que vous vouliez ?
ng-model
noms pour les cases à cocher sont encoreselectedData[key][value]
, et ne sont pas rendus àselectedData[name][string1]
. Pourquoi est-ce? Et pourtant Angulaire travaille avec elle comme si sonng-model
nom ESTselectedData[name][string1]
. Bizarre.Aussi, je souhaite que je pourrais upvote vous plus, ce fut un très grand et approfondie de la réponse, surtout avec l'ajout des critères de recherche que vous avez mis en place.
sauvé mon temps. Merci beaucoup
Merci de ton copain! Avait cherché partout, mais pas de solution fondée, meilleure solution.!
OriginalL'auteur DotDotDot
@DotDotDot
Je suis confronté au même pb avec _dynamic_names_, et de comprendre pleinement l'auteur de Q. Avec vous exemple, presque tout fonctionne bien SAUF (!) soumettez. Veuillez prendre un coup d'oeil dans la Capture d'écran jointe.
Avec cet exemple, le ng-model devez être dynamique, comme: selectedData_A_1, selectedData_B_2, selectedData_C_3, e.t.c ...
...alors seulement, dans le cas de l'utilisation de l'HTML-Formulaire de soumission sera en mesure de décoder la valeur de la case à cocher en relation avec le nom.
OriginalL'auteur ViPup