Question

我有一个使用select元素的HTML表单。 select元素的选项通过API调用填充。我发现有时页面似乎已完成加载，但尚未填充select元素。我正在寻找一种方法来禁用页面或指示它没有完成加载，直到从API填充select元素。

我有一个控制器来处理select元素的填充，以及提交按钮单击事件，它将表单数据提交给后端API。下面是我的Angular和一个包含select元素的HTML片段。

HTML

<select ng-model="self.form.UserName" 
    ng-options="user.Name as user.Name for user in self.userList" 
    ng-required="true">
    <option value="">- Choose User -</option>
</select>

角

<script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('myAppController', function ($scope, $http) {
        var self = this;
        self.userList= [];

        $http({
            method: 'GET',
            url: 'https://myApi.local/api/users/getAllUsers',
            headers : {
                'Content-Type': 'application/json'
            }
        }).then(function(result) {
            self.userList= result.data;
        }, function (error) {
            console.log(error);
        });

        self.submitFormData = function() {
            // form data submission handled  here
        }
    });
</script>

这可以很好地利用ng-cloak隐藏整个页面吗？

Answer 1

我会更像这样打电话来获得finally块。我会在页面上显示一个微调器并阻止用户在它进行时触摸它后面的任何东西。这样，用户就知道页面仍在加载，并且无法与未填充的下拉列表进行交互。

    $scope.showSpinner = true;
    $http({
        method: 'GET',
        url: 'https://myApi.local/api/users/getAllUsers',
        headers : {
            'Content-Type': 'application/json'
        }
    }).then(function(result) {
        self.userList= result.data;
    }).error(function (error) {
        console.log(error);
    }).finally(function(){
    $scope.showSpinner = false;
    });

禁用表单/页面，直到加载控件的API完成

1 个答案: