mardi 26 janvier 2016

Form is not populated from rest response with angular

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