javascript - 使用 ng-model 将数组中的选择列表发布到服务器

Question

我几乎已经解决了我的问题，现在只剩下向服务器发送数据了。

在我的场景中，我有一个表单，其中包含员工的详细信息和员工的项目(可以是多个)

现在，当用户想要添加项目时，他必须单击“添加项目”。这将在页面上生成一个包含项目列表的下拉列表。

这可以是任意数量。现在，当他选择了项目(例如 5 个)时，他将单击“提交”，将数据发布到服务器。

我想要将下拉列表的所有选择放入一个数组中并将其发送到保存函数。

HTML 代码:

<div>
                        <div ng-controller="AlertDemoCtrl">
                            <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" ng-model="ProjectId[item]">
                        <ul style="list-style-type: none; margin-left: 0px;">
                            <li >
                                <!--data-ng-model="ProjectId[item]"-->
                                <!--data-ng-model="test.ProjectId"-->
                                <!--<select data-ng-model="test.ProjectId" 
                                data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project">-->
                                <select>
                                    <option value="">-- Choose a Project --</option>
                                    <option ng-repeat="item in items" value="item.ProjectId">{{item.ProjectName}}</option>
                                </select>
                                <button type="button" ng-click="closeAlert($index)"><img src="delete.png" alt="Remove" style="height:20px; width:20px;" /></button>
                            </li>
                        </ul>
                    </alert>
                            <button class='btn' type='button' ng-click="addAlert()">Add Projects</button>
                        </div>
                    </div>

alert 是自定义指令，它将向表单添加新的下拉列表。 创建用于添加新员工数据的 Controller 。

var CreateCtrlEmp = function ($scope, $location, SampleEmp, SampleProj, SampleDes, sharedValues) {
$scope.items = SampleProj.query({ q: $scope.query });
$scope.itemsd = SampleDes.query({ q: $scope.query });
alert("Entered the saving function");
$scope.save = function () {
    $scope.item.ProjectId = [];
    SampleEmp.save($scope.item);
    $location.path('/emp');
};};

感谢帮助。

非常感谢!

图沙尔·夏尔马

Answer 1

我想你想将这样的数据结构发布到服务器？

{
    employee: {
        name: "Tushar",
        projects[{
           name: "Angular App"
        }]
    }
}

您可以在 Controller 中使用提交处理程序:

function EmployeeCtrl($scope) {
    $scope.employee = {projects:[]};  // Initialise data structure
    $scope.submit = function() {
      console.info($scope.employee);
      // Convert employee data structure to string an POST to server
      postToServer(JSON.stringify(angular.copy($scope.employee)));
    }
}

angular.copy 删除项目项上的 $$hashKey 属性。

https://github.com/angular/angular.js/issues/1875

表单如下所示:

<form ng-submit="submit()">
    <input ng-model="employee.name">
    <div ng-repeat="project in employee.projects">
        <input ng-model="project.name">
    </div>
    <button type="submit">Save</button>
</form>