I am new to AngularJS and I am a little confused with it. I have to do a page with a few configuration options, that I want to save and when I open the page again the inputs have to be populated with the saved value. I have one check box and when it's value is false, all other fields are disabled. I did the saving and it works, but when I load the page after that, the inputs are disabled and empty. I am doing GET request on ng-init and than I am setting the scope variable of every input. They stay disabled, the checkbox is unchecked even when the ng-model for this checkbox is set to true by the response. ng-checked is the same, not visible. When I check the checkbox, magically the values are visible with the proper values. This is the html.
<div ng-controller="archivingController" ng-init="getArchivingOptions()">
<form name="archivingForm" ng-submit="saveConfiguration()" novalidate>
<div id="archivingFormEnable">
<input type="checkbox" class="checkbox" ng-model="configurations.enableArchiving"/>
<label id="archivingLabelEnable">Enable Archiving</label>
</div>
<fieldset>
<legend>Archiving Settings</legend>
<div id="globalArchivingDiv">
<label id="globalArchivingLabel" style="width: 240px">Global archiving:</label>
<select ng-init="configurations.globalArchiving='disabled'" ng-model="configurations.globalArchiving" ng-disabled="!configurations.enableArchiving">
<option value="disabled">Disabled</option>
<option value="enabled">Enabled</option>
</select>
</div>
<div id="archiveFolderDiv">
<label id="archiveFolderLabel">Archive folder:</label>
<input type="text" ng-disabled="!configurations.enableFileArchiving" ng-model="configurations.archiveFolder" required/>
<span ng-show="fileArchivingForm.archiveFolder.$invalid && configurations.enableFileArchiving">Required.</span>
</div>
</fieldset>
<button id="save" ng-disabled="fileArchivingForm.$invalid && configurations.enableFileArchiving">Save</button>
</form>
</div>
And the controller.
mainApp.controller('archivingController', ['$scope', function($scope){
$scope.getArchivingOptions = function(){
$.ajax({
url: someURL,
type: 'GET',
dataType : 'json',
cache: false,
success : function(data) {
$scope.configurations = data.configurations;
}
});
}
$scope.saveConfiguration = function(){
$.ajax({
type : 'POST',
contentType : 'application/json',
url : someURL,
dataType : 'json',
data : JSON.stringify($scope.configurations),
complete : function(jqXHR, textStatus) {
//some msg
}
});
}
}]);
Actually I am sure that all of them are set, because when I call console.log($scope.configurations.archiveFolder);
the value that is printed is correct as the one from the response. The problem is that it is not visible till I click the checkbox. I do not know what to do. I am open for suggestions. Thank you in advance.
Aucun commentaire:
Enregistrer un commentaire