javascript - How can I capture an array of objects that are generated by the user? -

javascript - How can I capture an array of objects that are generated by the user? -

i trying capture array of objects generated user. problem though array generated, objects fail retain values entered user, populating array objects have null properties.

here code. javascript:

// add together additional employment $scope.addemployment = function() { $scope.additionalemployment.push( { addemploymentstatusid: '', employmenttypeid: '', employername: '', employmentstartdate: '', employmentenddate: '', employernumber: '', employerstaddress: '', employercity: '', employerstate: '' } ); }; $scope.saveapplication = function() { // create post obj var postobj = { additionalemployment: $scope.additionalemployment }; // api post $http.post('/api/employment/jobhistory', postobj) .success(function(data) { // success code }) .error(function(data) { // error code }); };

html:

<fieldset class="formbackground3"> <legend class="formbackground3">additional employment</legend> <div ng-repeat="x in additionalemployment" class="text-center"> <h3>{{$index + 1}}</h3> <!--employment status--> <div class="form-group" style="display: inline-block;"> <i class="glyphicon glyphicon-asterisk"></i> <label for="{{'empstatid' + $index}}" class="control-label"> employment status </label> <select class="form-control" ng-model="x[$index].employmentstatusid" id="{{'empstatid' + $index}}" ng-options="x.id x.status x in statuses.employment"> <option value="">--select--</option> </select> </div> <!--employment type--> <div class="form-group" style="display: inline-block;"> <i class="glyphicon glyphicon-asterisk"></i> <label for="{{'emptypeid' + $index}}" class="control-label"> employment type </label> <select class="form-control" ng-model="x[$index].employmenttypeid" id="{{'emptypeid' + $index}}" ng-options="x.id x.type x in statuses.employmenttype"> <option value="">--select--</option> </select> </div> <!--employer--> <div class="form-group" style="display: inline-block;"> <label for="{{'emplyid' + $index}}" class="control-label"> employer name </label> <input type="text" class="form-control" ng-model="x[$index].employername" id="{{'emplyid' + $index}}" /> </div> <!--employment start date--> <div class="form-group" style="display: inline-block;"> <label for="{{'empstartid' + $index}}" class="control-label"> <i class="glyphicon glyphicon-calendar"></i> employment start date </label> <input type="text" class="form-control" ng-model="x[$index].employmentstartdate" id="{{'empstartid' + $index}}" bs-datepicker /> </div> <!--employment end date--> <div class="form-group" style="display: inline-block;"> <label for="{{'empendid' + $index}}" class="control-label"> <i class="glyphicon glyphicon-calendar"></i> employment end date </label> <input type="text" class="form-control" ng-model="x[$index].employmentenddate" id="{{'empendid' + $index}}" bs-datepicker /> </div> <!--employer number--> <div class="form-group" style="display: inline-block;"> <label for="{{'empnumid' + $index}}" class="control-label"> employer phone number </label> <input type="text" class="form-control" ng-model="x[$index].employernumber" id="{{'empnumid' + $index}}" /> </div> <!--employer st address--> <div class="form-group" style="display: inline-block;"> <label for="{{'empstid' + $index}}" class="control-label"> employer st address </label> <input type="text" class="form-control" ng-model="x[$index].employerstaddress" id="{{'empstid' + $index}}" /> </div> <!--employment city--> <div class="form-group" style="display: inline-block;"> <label for="{{'empcityid' + $index}}" class="control-label"> employer city </label> <input type="text" class="form-control" ng-model="x[$index].employercity" id="{{'empcityid' + $index}}" /> </div> <!--employment state--> <div class="form-group" style="display: inline-block;"> <label for="{{'empstateid' + $index}}" class="control-label"> employer state </label> <input type="text" class="form-control" ng-model="x[$index].employerstate" id="{{'empstateid' + $index}}" /> </div> <!--remove employment--> <div class="text-center"> <button ng-click="removeemployment($index)"> remove </button> </div> </div> <div class="text-center" style="padding: 7px;"> <button ng-click="addemployment()" class="btn btn-info btn-xs"> add together additional employment </button> </div> </fieldset> <button ng-click="saveapplication()" class="btn btn-warning"> submit </button>

what missing here?

try changing ng-model not include [$index]. seems repeating on array of objects , trying access numerical index of object.

i think assigning to:

{ 1: field one, 2: field 2 ... }

ex:

ng-model="x.employmentstatusid"

i think issue.

javascript html angularjs angularjs-scope