Angularjs ajouter Dynamiquement de nouveaux div avec des éléments d'enfant et le modèle

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é):

function Model() {
this.selected_location = null;
this.selected_stage = null;
this.wIn24 = null;
}
$scope.w = {
w: [ new Model() ]
};

Maintenant, placez le répéter en partie dans un ng-repeat:

<div ng-repeat="ww in w.w">

Et ajuster la ng-models en conséquence, par exemple:

<select data-role="none" data-ng-model="ww.selected_location"
ng-options="location.value as location.label for location in locations">
<option value="">Choose a Location</option>
</select>

Chaque fois qu'un nom est obligatoire et doit être unique, l'utilisation de la {{ $index }}, si aucun id n'est disponible:

<input data-role="none" type="radio" name="wI4_{{$index}}" value="true"
data-ng-model="ww.wIn24" />

Enfin mettre le add() et remove() fonctions dans le champ d'application:

$scope.add = function() {
$scope.w.w.push(new Model());
};
$scope.remove = function(ww) {
var index = $scope.w.w.indexOf(ww);
if( index >= 0 ) $scope.w.w.splice(index,1);
};

Et les lier à la modèle:

<a ng-click="remove(ww)">Remove</a>
<button data-role="none" ng-click="add()">Add Wound</button>

Ce violon a la solution complète: http://jsfiddle.net/x9NjJ/

---

EDIT:
Le violon ci-dessus ont disparu, y compris une source reconstruite:

HTML:

<div ng-app="app" ng-controller="survey">
<div ng-repeat="ww in w.w">
<select data-role="none" data-ng-model="ww.selected_location"
ng-options="location.value as location.label for location in locations">
<option value="">Choose a Location</option>
</select>
<select data-role="none" data-ng-model="ww.selected_stage"
ng-options="stage.value as stage.label for stage in stages">
<option value="">Choose a Stage</option>
</select>
In 24: <input data-role="none" type="radio" name="wI4_{{$index}}" value="true" data-ng-model="ww.wIn24" />Yes
<input data-role="none" type="radio" name="wI4_{{$index}}" value="false" data-ng-model="ww.wIn24" />No
<a href="#" ng-click="remove(ww, $event)" style="display:inline-block; margin-left: 20px;">Remove</a>
</div>
<button data-role="none" ng-click="add()">Add Wound</button>
</div>

Javascript:

var app = angular.module('app', []);
function Model() {
this.selected_location = null;
this.selected_stage = null;
this.wIn24 = null;
}
app.controller('survey', function($scope) {
$scope.w = {
w: [ new Model() ]
};
$scope.add = function() {
$scope.w.w.push(new Model());
};
$scope.remove = function(ww, $event) {
$event.preventDefault();
var index = $scope.w.w.indexOf(ww);
if( index >= 0 ) $scope.w.w.splice(index,1);
};
$scope.locations = [
{
label: 'Head',
value: 9,
},
{
label: 'Shoulders',
value: 5,
}
//... more would go here
];
$scope.stages = [
{
label: 'I',
value: 0
},
{
label: 'II',
value: 1
}
];
});