Post a list of selections in an array to server using ng-model

Question

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.

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.

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

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>

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

Help appreciated.

Thanx a ton!

Tushar Sharma

Answer 1

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