Angularjs ajouter Dynamiquement de nouveaux div avec des éléments d'enfant et le modèle
J'ai un jsfiddle mis en place à http://jsfiddle.net/skwidgets/gnvVY/13/
Il y a un div avec quelques éléments de formulaire, en ce y compris deux menus déroulants un groupe de boutons radio et un lien pour supprimer la ligne.
<div ng-app="myapp">
<div id="w" ng-controller="survey">
<div class="qs">
<div class="">1</div>
<div class="">
<select data-role="none" name="w1.selected_location" data-ng-model="w.w1.selected_location" ng-options="location.value as location.label for location in locations">
<option value="">Choose a Location</option>
</select>
</div>
<div class="">
<select data-role="none" name="selected_stage" data-ng-model="w.w1.selected_stage" ng-options="stage.value as stage.label for stage in stages">
<option value="">Choose a Stage</option>
</select>
</div>
<div class="">
<input data-role="none" type="radio" name="wI4" value="true" data-ng-model="w.w1.wIn24">
</div>
<div class="">
<input data-role="none" type="radio" name="wI4" value="false" data-ng-model="w.w1.wIn24">
</div> <a href="#">Remove</a>
</div>
<div>
<button data-role="none">Add Row/button>{{w | json}}</div>
</div>
</div>
<script>
var locations = [{
label: 'Head',
value: 9,
}, {
label: 'Shoulders',
value: 5,
}
//... more would go here
];
var stages = [{
label: 'I',
value: 0
}, {
label: 'II',
value: 1
}];
</script>
Ils sont enveloppés dans un div avec une classe de "qs". Toutes les sélections sont peuplées d'un modèle appelé "w1" Il y a un bouton pour ajouter une autre ligne de ces éléments de formulaire et il y parentale conteneur pour les dom si l'utilisateur veut ajouter un autre, mais il doit avoir un autre nom du modèle qui est similaire à la première (w1), mais le nombre dans le nom du modèle est incrémenté (w2, w3, et ainsi de suite) et c'est le numéro de ligne.
J'ai essayé de faire une directive pour gérer le comportement, mais n'ont pas eu de chance.
Toutes les Idées seront appréciées.
Vous devez vous connecter pour publier un commentaire.
La façon d'accomplir ceci dans Angulaire (et MVVM cadres en général) est de contrôler le modèle. Le modèle est naturellement un tableau d'objets, chaque objet ayant la properies
selected_location
,selected_stage
,wIn24
. Donc, commencer par ceci (à la suite de l'attribution de noms, il peut être amélioré):Maintenant, placez le répéter en partie dans un
ng-repeat
:Et ajuster la
ng-model
s en conséquence, par exemple:Chaque fois qu'un nom est obligatoire et doit être unique, l'utilisation de la
{{ $index }}
, si aucun id n'est disponible:Enfin mettre le
add()
etremove()
fonctions dans le champ d'application:Et les lier à la modèle:
Ce violon a la solution complète: http://jsfiddle.net/x9NjJ/
EDIT:
Le violon ci-dessus ont disparu, y compris une source reconstruite:
HTML:
Javascript:
vous pouvez utiliser ce code pour l'ajout de blocs dynamiques