如何遍历Angular.js中的动态添加字段并获取数据并将其发送到服务器？

Question

我有这段代码用于动态添加HTML的输入字段

    <div ng-app="timeTable" ng-controller="addCoursesCtrl">
        <button class="btn btn-primary" ng-click="addNewCourse()">Add New Course</button><br/><br/> 
        <fieldset ng-repeat="choice in choices">
            <div class="row">
                <div class="col-md-6">
                    <select class="form-control">
                        <option>Lab</option>
                        <option>Theory</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="Enter Course Name" name="" class="form-control" />
                </div>
            </div>
            <br/>
        </fieldset>
        <h2>
            {{choice}}
        </h2>
    </div>

js

timeTable.controller("addCoursesCtrl", function ($scope) {
    $scope.choices = [{id:'choice1'},{id:'choice2'}];
    $scope.addNewCourse = function () {
        var newITemNo = $scope.choices.length + 1;
        $scope.choices.push({ 'id': 'choice' + newITemNo });
    };
});

在我的控制器中，每次单击addnewCourse按钮，它都会向数组中添加新的选择，而在html中，我使用ng-repeat添加需要的输入，但是我的问题是如何获取数据并将数组作为对象放入我的prefrerd对象是[{“ Course”：value ..，“ Type”：value ....}，{“ Course”：value ..，“ Type”：value ....}]的数组，并将其发送到服务器在这种形状下，如何做到这一点的首选方法是，从输入字段中选择课程值，从select中选择类型值。

Answer 1

您可以使用ng-model将要发送到服务器的数据直接绑定到视图。

定义服务器所需的数据（最终，在服务中执行此操作）：

$scope.choices = [{id:'choice1', course:'', type:''},{id:'choice2', course:'', type:''}];

在视图中：

...
<fieldset ng-repeat="choice in choices">
    ...
    <input type="text" placeholder="Enter Course Name" name=""
        ng-model="choice.course"
        class="form-control" />
    ...
    <select class="form-control" ng-model="choice.type">
        <option>Lab</option>
        <option>Theory</option>
    </select>
    ...

转换为json以发送到服务器：

var asJson = angular.toJson($scope.choices);

Answer 2

您可以将ngModel添加到选择和输入中。 首先，创建一个带空数组的作用域变量：

$scope.formData = [];

然后，在标记中，在重复中添加ng-model并使用$index变量跟踪数组：

<fieldset ng-repeat="choice in choices">
    <div class="row">
        <div class="col-md-6">
            <select ng-model="formData[$index].Type" class="form-control">
                <option>Lab</option>
                <option>Theory</option>
            </select>
        </div>
        <div class="col-md-6">
            <input ng-model="formData[$index].Course" type="text" placeholder="Enter Course Name" name="" class="form-control" />
        </div>
    </div>
    <br/>
</fieldset>

这是一个jsFiddle