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-models,例如:

<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()和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);
};

并将它们绑定到模板:

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