采用NG-模型发布在一个数组服务器选择列表 [英] Post a list of selections in an array to server using ng-model

问题描述

我几乎解决了我的问题，现在只留下了将数据发送到服务器。

I have almost resolved my issue, now just left with sending data to the server.

在我的情况，我有一个具有员工详细信息和项目员工（可以是多个）

In my scenario, I have a form that has employee details and projects for an employee (can be multiple)

现在，当用户想要添加项目，他要点击添加项目。这将生成的项目列表页面上的下拉列表。

Now when the user wants to add projects, he has to click on "Add Projects". This will generate a dropdown on the page with list of projects.

这可以是任何数目。现在，当他选择的项目（比如5）西港岛线，他点击提交将发布数据到服务器。

This can be any in number. Now when he has selected the projects(say 5) he wil click on submit that will post data to the server.

我想在一个数组中dropdownists的所有选择，然后邮寄到保存功能。

I want all the selections of the dropdownists in an array and send it to save function.

HTML code：

HTML Code:

<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>

警报是自定义指令，将增加新的dropdownlists到窗体。
添加新员工数据创建控制器。

alert is the custom directive that will add new dropdownlists to the form. create controller for adding new employee data.

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

帮助AP preciated。

Help appreciated.

感谢名单一吨！

图莎尔夏尔马

推荐答案

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

I think you want to post a data structure like this to the server?

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

您可以使用一个控制器提交处理程序：

You could use a submit handler in the 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属性。

angular.copy removes the $$hashKey property on the project items.

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

在哪里的形式是这样的：

Where the form would look like this:

<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>

这篇关于采用NG-模型发布在一个数组服务器选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！