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

How to loop through dynamically add Fields in Angular.js and get data and send it to the server?

本文关键字：数据 获取 服务器 Fields Angular js 添加 动态 循环      更新时间：2023-09-26

我有这段代码用于动态添加输入字段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来添加需要的输入，但我的问题是如何将数据作为对象放入数组中，我的首选对象是[｛"课程"：值..，"类型"：值….｝，｛"教程"：值.，"类型：值…..｝]并以这种形状将其发送到服务器，那么首选的方法是如何做到这一点，输入feild中的课程值，以及select中的类型值。

您想要发送到服务器的数据可以直接绑定到具有ng模型的视图。

定义服务器需要的数据（最终，在服务中这样做）：

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

您只需在选择和输入中添加一个ngModel即可。首先，创建一个具有空数组的作用域变量：

$scope.formData = [];

然后，在标记中，在repeat中添加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

相关文章：