Как показать статус загрузки при загрузке выпадающего / выбрать список со значениями из базы данных? Angular 1, bootstrap и искра

Question

Я хочу загрузить выпадающее / выбрать поле формы, используя значения из бэкэнда. Запрос для бэкэнда происходит из текстового поля в той же форме. У меня это работает частично, где я могу:

• Передать значение запроса из текстового поля в той же форме
• Запрос к базе данных и получить список
• Заполните раскрывающийся список значениями, выбранными из базы данных

Однако я не могу показать состояние загрузки во время выборки данных, вот мой код:

HTML:

<div ng-show="colorLoading">
    Loading, please wait...
    <!-- can also put gif animation instead -->
</div>

<select class="form-control" ng-options="color as color for color in colorOptions" name="color" ng-init="color = color || colorOptions[0]" ng-model="color" ng-click ="loadColors(productId)" ng-hide="colorLoading" required></select>

JS:

   $scope.loadColors = function(val) {
       console.log("PRODUCT ID " + val);
       $scope.colorLoading = true; 
       $http.get('/api/v1/bugdb/getColors?productId=' + val).success(function (data){
            console.log(data);
            $scope.colorOptions = data;
            $scope.colorLoading = false; 
        }).error(function (data, status) {
            $scope.colorLoading = false; 
            console.log('Error ' + data)
        });         

   }

Answer 1

Используйте условие *ngIf в шаблоне, чтобы показать загрузочный div во время выборки данных.

<div *ngIf="colorLoading;else content">loading...</div>
 <ng-template #content>
    <select class="form-control" ng-options="color as color for color in colorOptions" name="color" ng-init="color = color || colorOptions[0]" ng-model="color" ng-click ="loadColors(productId)" ng-hide="colorLoading" required></select>
 </ng-template>

В этом примере выше, когда colorLoading помечен как true, шаблон отображает загрузочный div. Однажды colorLoading помечается как ложный. Он будет искать содержимое div и загружать его.

Для получения дополнительной информации см. this

Answer 2

Использовать ng-mousedown.

Изменить

ng-click ="loadColors(productId)"

На

ng-mousedown = “loadColors(productId)”