HTML
Below we have a form nested within a <div> element.
The parent <div> is bound to a controller called TaskController, aliased as "task".
We utilize the ng-submit directive on the form to call task.save() on submit.
Each of the form elements models a form data parameter in our TaskController.
<div ng-controller="TaskController as task">
<form ng-submit="task.save()">
<div>
<div>Available:<input type="text" ng-model="task.formData.Available" required /></div>
<div>BreachLetterDueDate:<input type="date" ng-model="task.formData.BreachLetterDueDate" /></div>
<div>BreachLetterExpiration:<input type="date" ng-model="task.formData.BreachLetterExpiration" /></div>
<div>TestCheck<input type="checkbox" ng-model="task.formData.TestCheck"/></div>
<button>Save</button>
</div>
</form>
</div>
Javascript
The controller below is responsible for the loading and saving of forms.
We inject the $http service into this controller in order to use the Quandis REST API.
For the purposes of this demo, the controller loads previously saved data into the form on initialization.
If the .success method of the $http service is fired, we first transform the response data so that all form information is within the root of the JSON object.
Because the form data has already been bound to task.formData via ng-model in the HTML, the appropriate values are now modeled on the page.
Two things to note:
When the form is initialized, we append Select?Output=Json to task.url
Select allows us to search for a specific form based on the form ID
When the form is saved, we append Save?Output=Json to task.url
Save directs the server to write changes to the form, and return the updated data in Json format
For more information on Save, please see the AbstractObject section titled 'Saving Data'
angular.module('app').controller('TaskController', function ($http) {
var task = this;
task.url = "http://localhost/Decision/ImportForm.ashx/";
//initialization of form
$http({
method: 'POST',
url: task.url+"Select?Output=Json",
params: { ID: 213715 },
responseType:'json'
})
.success(function (data) {
task.formData = task.transformResponse(data);
});
//saving the form
task.save = function () {
$http({
method: 'POST',
url: task.url + "Save?Output=Json",
params: task.formData,
responseType:'json'
})
.success(function (data) {
task.formData = task.transformResponse(data);
})
};
//utility method
task.transformResponse = function (data) {
angular.forEach(data.XmlData.ImportFormXml, function (value, key) {
data[key] = value;
});
delete data.XmlData;
return data;
};
});