AngularJS动态添加带有子元素和模型的新div

在Angular（通常是MVVM框架）中完成此操作的方法是控制模型。该模型是自然物体的阵列，具有性的判定的每个对象selected_location，selected_stage，wIn24。因此，从此开始（按照您的命名，可以对其进行改进）：

function Model() {
    this.selected_location = null;
    this.selected_stage = null;
    this.wIn24 = null;
}

$scope.w = {
    w: [ new Model() ]
};

现在，将重复的部分放在中ng-repeat：

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

并相应地调整ng-model，例如：

<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>

每当需要名称且名称唯一时{{ $index }}，如果没有可用的ID，请使用：

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

最后将add()andremove()函数放在范围内：

$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);
};

并将它们绑定到模板：

<a ng-click="remove(ww)">Remove</a>

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

该小提琴具有完整的解决方案：http : //jsfiddle.net/x9NjJ/

编辑：上面的小提琴消失了，包括完整的重建来源：

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
        }
    ];
});