Question

我是AngularJS的新手，我对此感到困惑。我必须做一个包含一些配置选项的页面，我想要保存，当我再次打开页面时，必须使用保存的值填充输入。我有一个复选框，当它的值为false时，所有其他字段都被禁用。我做了保存并且它可以工作，但是当我在此之后加载页面时，输入被禁用并且为空。我在ng-init上做GET请求，而不是设置每个输入的范围变量。它们保持禁用状态，即使响应将此复选框的ng-model设置为true，也会取消选中该复选框。 ng-checked是相同的，不可见。当我选中复选框时，奇怪的是，值可以使用正确的值显示。这是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>

和控制器。

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
        }
    });     
}
}]);

实际上我确信所有这些都已经确定，因为我打电话的时候 console.log($scope.configurations.archiveFolder);打印的值与响应中的值相同。问题是在我点击复选框之前它是不可见的。我不知道该怎么办。我愿意接受建议。提前谢谢。

Answer 1

如果你使用jquery的$ .ajax而不是angular的$ http，你需要将回调包装在$ scope中。$ apply：

"success": function(data) {
   $scope.$apply(function() {
       //your code here
   });
}

表格未填充角度为

1 个答案: