15248

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

Answer1:

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.

<a href="https://github.com/angular/angular.js/issues/1875" rel="nofollow">https://github.com/angular/angular.js/issues/1875</a>

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>

Recommend

  • jQuery unload with an AJAX call not working in Chrome
  • Excel Not Responding During Macro
  • Service Fabric - how to gracefully fail an app
  • Apple Reachability Notifications for Network OR Wi-Fi
  • Fail SonarQube quality gate when coverage decreases
  • Floated image with variable width and heading with background image
  • How to use JavaScript to determine whether a file exists in a directory?
  • Functions in global context
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Meteor helpers not available in Angular template
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Ajax Loaded meta Tags
  • Display issues when we change from one jquery mobile page to another in firefox
  • Problems to linebreak with an int in JLabel
  • Align navbar back button on right side
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • How to add date and time under each post in guestbook in google app engine
  • TFS: Get latest causes slow project reloading
  • Sending data from AppleScript to FileMaker records
  • Fill an image in a square container while keeping aspect ratio
  • Running a C# exe file
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Symfony2: How to get request parameter
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • Compare two NSDates in iPhone
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can I remove ASP.NET Designer.cs files?
  • JaxB to read class hierarchy
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?