1

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

我有一个控制器来处理选择元素的填充以及提交表单数据到后端 API 的提交按钮单击事件。下面是我的 Angular 和包含选择元素的 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隐藏整个页面的好方法吗？

4

1 回答 1

2

我会像这样发出我的呼唤以获得 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;
    });
于 2017-03-03T19:58:12.540 回答