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

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>