javascript - 如何在 Angular.js 中循环动态添加 Field 并获取数据并将其发送到服务器？

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

在我的 Controller 中，每次单击 addnewCourse 按钮​​时，它都会向数组添加新的选择，在我的 html 中，我使用 ng-repeat 添加所需的输入，但我的问题是如何获取数据并将其作为对象放入数组中我的首选对象是数组[{"类(class)":值..,"类型":值....},{"类(class)":值..,"类型":值....}]并将其以这种形式发送到服务器，那么首选的方式是如何做到这一点，来自输入字段的类(class)值，以及来自选择的类型值。

Answer 1

想要发送到服务器的数据可以通过ng-model直接绑定(bind)到 View 。

定义服务器需要的数据(最终在服务中执行此操作):

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

在 View 中:

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