javascript - Angularjs动态添加带有子元素和模型的新div

Question

我在 http://jsfiddle.net/skwidgets/gnvVY/13/ 设置了一个 jsfiddle

基本上有一个包含一些表单元素的 div，其中包括两个下拉菜单、一个单选按钮组和一个用于删除该行的链接。

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

它们被包裹在一个类为“qs”的div中。所有的选择都被填充到一个名为“w1”的模型中，有一个按钮可以添加这些表单元素的另一行，如果用户想要添加另一个元素，则可以在 dom 中添加父容器，但它必须具有相似的不同模型名称到 (w1) 的第一个，但模型名称中的数字递增(w2、w3 等)，行号也是如此。

我试图制定一个指令来处理这种行为，但没有成功。

任何想法将不胜感激。

Answer 1

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

每当需要一个名称并且应该是唯一的时，如果没有可用的 ID，请使用 {{ $index }}:

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

最后将 add() 和 remove() 函数放在作用域中:

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

并将它们绑定(bind)到模板:

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

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

这个 fiddle 有完整的解决方案:http://jsfiddle.net/x9NjJ/

---

编辑:上面的 fiddle 消失了，包括一个完整的重建源:

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