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是自定义指令，它将向表单添加新的下拉列表。创建控制器以添加新的员工数据。

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

帮助表示赞赏。

Thanx一吨！

Tushar Sharma

Answer 1

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

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

您可以在控制器中使用提交处理程序：

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>

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

1 个答案: