Input fields values is not passing to controller - angularjs

Question

I have been stuck on this for a while. I have a Job class that has multiple ChangeOrders and Purchase Orders. I can create a New Job without problems. I use the same code to Post the New CO and PO. The problem is the values are not binding to there controllers. The difference between the New Job and CO/PO is I am using $rootScope and ngStorage to insert the JobId into the CO/PO modals.
Purchase Order Modal
//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewPurchaseOrderModal.html',
controller: 'NewPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
Purchase Order POST
//Post New Purchase Orders
$scope.submitPO = function () {;
$scope.job = {};
alert($scope.PONumber);
var data = {
JobId: $scope.job.JobId,
PONumber: $scope.PONumber,
PODate: $scope.PODate,
POAmount: $scope.POAmount,
POLastPrintDate: $scope.POLastPrintDate,
POEmail: $scope.POEmail,
POPrint: $scope.POPrint,
POFaxNumber: $scope.POFaxNumber,
PONotes: $scope.PONotes,
POCreatedBy: $scope.POCreatedBy,
PODeliveryDate: $scope.PODeliveryDate,
POShipVia: $scope.POShipVia,
POShowPrices: $scope.POShowPrices,
POCostCode: $scope.POCostCode,
POApprovedNumber: $scope.POApprovedNumber,
POBackorder: $scope.POBackorder,
}
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
console.log(data);
$scope.cancelNewPurchaseOrderModal();
});
};
});
Purchase Order View
<div class="container" style="margin-top:20px" ng-controller="POCtrl">
<form ng-submit="submitPO()" enctype="multipart/form-data">
<fieldset>
<tabset>
<tab heading="Cover">
<div class="col-xs-12" style="margin-top:10px">
<div class="inline-fields" style="" ng-show="true">
<label>JobId:</label>
<input style="width:150px;" ng-model="job.JobId" type="text" />
</div>
<div class="inline-fields">
<label></label>
<input style="width:150px;margin-left:81px" ng-model="job.JobName" type="text" />
<label style="margin-left:268px">Number:</label>
<input style="width:150px" ng-model="PONumber" type="text" />
</div>
<div class="inline-fields">
<label style="margin-left:48px">Attn:</label>
<input style="width:150px;" ng-model="ChangeOrderAttn" type="text" />
<label style="margin-left:291px">Date:</label>
<input style="width:150px" ng-model="PODate" type="date" />
</div>
<div class="inline-fields">
<label style="margin-left:39px">Email:</label>
<input style="width: 150px;" ng-model="POEmail" type="text" />
<label style="margin-left:217px">GC Ref Number:</label>
<input style="width:150px" ng-model="POApprovedNumber" type="text" />
</div>
<div class="inline-fields">
<label style="margin-left:52px">Fax:</label>
<input style="width: 150px; " ng-model="POFaxNumber" type="text" />
<label style="margin-left:233px">Delivery Date:</label>
<input style="width:150px" ng-model="PODeliveryDate" type="date" />
</div>
<div class="inline-fields">
<label style="margin-left: 438px">Approved Amount:</label>
<input style="width:150px" ng-model="ChangeOrderApprovedAmount" type="text" />
</div>
</div><!--End col-xs-6-->
<div class="col-xs-12">
<div class="inline-fields" style="margin-top:30px;margin-left:2px">
<label>Created By:</label>
<input style="width:635px" ng-model="POCreatedBy" type="text" />
</div>
<div class="inline-fields" style="margin-left:37px">
<label>Notes:</label>
<textarea style="width:635px;height:200px" ng-model="PONotes"></textarea>
</div>
<div class="inline-fields" style="margin-top:10px;margin-left:509px">
<label>Amount:</label>
<input style="width:150px" ng-model="POAmount" type="text" />
</div>
</div>
<div class="col-xs-12" style="margin-top:30px;padding-bottom:20px">
<input style="margin-left:435px;width:75px;margin-right:25px" ng-click="printEditChangeOrderModal()" type="button" value="Print" go-click="#" />
<input style="margin-right:25px;width:75px" type="submit" value="Save" go-click="#" />
<input style="width:75px" type="button" ng-click="cancelNewPurchaseOrderModal();" value="Exit" go-click="#" />
</div><!--End col-xs-12-->
</tab><!--End Cover Content-->
<tab heading="Details">...</tab>
<tab heading="Items">...</tab>
</tabset><!--End Tab Content-->
</fieldset><!--End Fieldset-->
</form>
Function to set the JobId in sessionStorage
//Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
$rootScope.job = job;
angular.extend($scope.selectedJob, job);
console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
$sessionStorage.$reset();
};
table to select which Job is set in Storage
<div id="scrollArea" style="margin-top:40px" ng-controller="JobCtrl">
<table class=" table table-striped table-hover">
<thead> <tr><th>No</th><th>Name</th></tr></thead>
<tbody>
<tr ng-repeat="job in jobArray" class="pointer no_selection" ng-class="{highlight: job.JobNumber===selectedJob.JobNumber}">
<td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobNumber}}</td>
<td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobName}}</td>
</tr>
</tbody>
</table>
</div><!--End Job Table-->
PO Controller
'use strict';
app.controller('POCtrl', function ($scope, $rootScope, $resource, $http, $filter,
$q, $modal, PO, POGet, POFactory, notificationFactory) {
//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewPurchaseOrderModal.html',
controller: 'NewPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
//Edit PurchaseOrder Modal
$scope.EditPurchaseOrderModal = function (id) {
$.get('/api/apiPurchaseOrder/' + id, function (data) {
$scope.items = data;
var modalInstance = $modal.open({
templateUrl: 'views/modals/EditPurchaseOrderModal.html',
controller: 'EditPurchaseOrderModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
items: function () {
return $scope.items;
}
}
});
});
};
//GET PurchaseOrders
POGet.query().then(function (data) {
$scope.poArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
//Post New Purchase Orders
$scope.submitPO = function () {;
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
$scope.cancelNewPurchaseOrderModal();
});
};
//$scope.submitPO = function () {;
// $scope.job = {};
// alert($scope.PONumber);
// var data = {
// JobId: $scope.job.JobId,
// PONumber: $scope.PONumber,
// PODate: $scope.PODate,
// POAmount: $scope.POAmount,
// POLastPrintDate: $scope.POLastPrintDate,
// POEmail: $scope.POEmail,
// POPrint: $scope.POPrint,
// POFaxNumber: $scope.POFaxNumber,
// PONotes: $scope.PONotes,
// POCreatedBy: $scope.POCreatedBy,
// PODeliveryDate: $scope.PODeliveryDate,
// POShipVia: $scope.POShipVia,
// POShowPrices: $scope.POShowPrices,
// POCostCode: $scope.POCostCode,
// POApprovedNumber: $scope.POApprovedNumber,
// POBackorder: $scope.POBackorder,
// }
// $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
// console.log(data);
// $scope.cancelNewPurchaseOrderModal();
// });
//};
});//End POCtrl
app.controller('NewPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.cancelNewPurchaseOrderModal = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('EditPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancelEditPurchaseOrderModal = function () {
$modalInstance.dismiss('cancel');
};
});
Job Controller
'use strict';
app.controller('JobCtrl', function ($scope, $rootScope, $resource, $route, $http, $filter,
$q, $modal, $sessionStorage, Job, JobGet, jobFactory, notificationFactory) {
//New Job Modal
$scope.NewJobModal = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modals/NewJobModal.html',
controller: 'NewJobModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
p: function () {
return $scope.p;
}
}
});
};
$scope.EditJobModal = function (id) {
$.get('/api/apiJob/' + id, function (data) {
$scope.items = data;
var modalInstance = $modal.open({
templateUrl: 'views/modals/EditJobModal.html',
controller: 'EditJobModalInstanceCtrl',
windowClass: 'large-Modal',
resolve: {
items: function () {
return $scope.items;
}
}
});
});
};
//GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) {
$scope.jobArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
//Post New Job
$scope.submitJob = function () {
var data = {
GeoAreaId: $scope.newItems.GeoAreaId,
JobTypeId: $scope.newItems.JobTypeId,
JobClassId: $scope.newItems.JobClassId,
CustomerId: $scope.newItems.CustomerId,
JobId: $scope.newItems.JobId,
JobNumber: $scope.newItems.JobNumber,
JobName: $scope.newItems.JobName,
JobDescription: $scope.newItems.JobDescription,
JobOriginalContract: $scope.newItems.JobOriginalContract,
JobBillingDate: $scope.newItems.JobBillingDate,
JobTotalCO: $scope.newItems.JobTotalCO,
JobRevisedContract: $scope.newItems.JobRevisedContract,
}
$http.post('/api/apiJob/PostNewJob', data).success(function (data, status, headers) {
console.log(data);
$scope.cancelNewJobModal();
$scope.$evalAsync(function () {
$scope.data;
});
});
};
//Update Job
$scope.updateJob = function (job) {
jobFactory.updateJob(job).success(successCallback)
.error(errorCallback);
console.log(job);
$scope.cancelEditJobModal();
$scope.$evalAsync(function () {
$scope.job;
});
};
var successCallback = function (job, status, headers, config) {
notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
notificationFactory.error(job.ExceptionMessage);
};
//Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
$rootScope.job = job;
angular.extend($scope.selectedJob, job);
console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
$sessionStorage.$reset();
};
$scope.newItems = {};
//Typeahead New Job Customer select
$scope.selectNewCustomer = function (customer) {
$scope.newItems.CustomerId = customer.CustomerId;
$scope.newItems.Customer.CustomerName = customer.CustomerName;
$scope.newItems.Customer.CustomerAddress = customer.CustomerAddress;
$scope.newItems.Customer.CustomerCity = customer.CustomerCity;
$scope.newItems.Customer.CustomerState = customer.CustomerState;
$scope.newItems.Customer.CustomerZipcode = customer.CustomerZipcode;
$scope.newItems.Customer.CustomerPhoneNumber = customer.CustomerPhoneNumber;
$scope.newItems.Customer.CustomerFaxNumber = customer.CustomerFaxNumber;
$scope.newItems.Customer.CustomerWebsite = customer.CustomerWebsite;
$scope.newItems.Customer.CustomerOtherShit = customer.CustomerOtherShit;
$scope.newItems.Customer.CustomerHidden = customer.CustomerHidden;
$scope.newItems.Customer.CustomerPM = customer.CustomerPM;
$scope.newItems.Customer.CustomerAdmin = customer.CustomerAdmin;
$scope.newItems.Customer.CustomerAccountant = customer.CustomerAccountant;
};
});//End Job Controller
app.controller('NewJobModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.cancelNewJobModal = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('EditJobModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancelEditJobModal = function () {
$modalInstance.dismiss('cancel');
};
});

Answer 1

I'd change to be handled everything in a single model which is easier to:
$scope.submitPO = function () {
$scope.data.jobId = $rootscope.job.id; //make sense?
$http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
$scope.cancelNewPurchaseOrderModal();
});
};
the view:
<div class="inline-fields" style="" ng-show="true">
<label>JobId:</label>
<input style="width:150px;" ng-model="data.job.JobId" type="text" />
</div>
.....
<div class="inline-fields">
<label style="margin-left:48px">Attn:</label>
<input style="width:150px;" ng-model="data.ChangeOrderAttn" type="text" />
<label style="margin-left:291px">Date:</label>
<input style="width:150px" ng-model="data.PODate" type="date" />
</div>
and remove this $scope.job = {}; from your submit function, it looks like you are 'reseting' the job to an empty object