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 s，例如：

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

并将它们绑定到模板：

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

Answer 2

您可以使用此代码添加动态块

 <div ng-app="" ng-controller="customersController">

<ul>
<li ng-repeat="x in names">
<div>{{ x.Country }}</div>
</li>
</ul>

<script>
function customersController($scope,$http) {
 $http.get("http://www.w3schools.com/website/Customers_JSON.php")
 .success(function(response) {$scope.names = response;});}
</script>