Показать загрузчик с помощью bootstrap typeahead-loading

Я создаю Угловое приложение, использующее uib-typeahead, и у меня возникли проблемы с использованием атрибута загрузки. Я хотел бы показать spinner, в то время как typeahead просматривает большой набор данных. Вот мой код:Показать загрузчик с помощью bootstrap typeahead-loading

<input id="value" 
    class="form-control input-sm" type="text" 
    ng-model="filter" 
    uib-typeahead="option.value for option in values | filter:$viewValue | limitTo:1500" 
    placeholder="Select a value" 
    typeahead-loading="is_Loading" 
    typeahead-min-length="0" 
    typeahead-editable="true"> 

    <span ng-if="is_Loading" id="myDiv"><img src="lib/images/ajax-spinner-large.gif" class="ajax-loader"/></span>

Изображение не отображается, когда я печатаю текстовое поле. Должен ли я назначать переменную $ scope is_Loading?

источник

2017-02-21 ellier7

Handle его с помощью ng-style

Попробуйте

<!DOCTYPE html> 
 
<html lang="en" ng-app="filterApp"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
 
</script>     
 

 

 
<style type="text/css"> 
 
    .loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
    } 
 

 
    @-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
    } 
 

 
    @keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
    } 
 
</style> 
 

 

 
<body ng-controller="tableController"> 
 
    <button ng-show="showLoading" ng-click="changeLoading()"> hide Loading</button> 
 
    <button ng-show="!showLoading" ng-click="changeLoading()">show Loading</button> 
 

 

 

 
    <div class="loader" ng-style={display:loaderStyle}></div> 
 
    <script> 
 

 
    var app = angular.module('filterApp',[]); 
 

 
    app.controller('tableController',function($scope){ 
 
     $scope.showLoading = true; 
 
     $scope.loaderStyle = 'block'; 
 
     
 

 
     $scope.changeLoading = function(){ 
 
     $scope.showLoading = !$scope.showLoading; 
 
     if ($scope.showLoading) { 
 
      $scope.loaderStyle = 'block'; 
 
     }else{ 
 
      $scope.loaderStyle = 'none'; 
 
     } 
 

 
     } 
 

 

 
    }); 
 
    </script> 
 

 
</body> 
 
</html>

источник

2017-02-21 02:16:40

Благодарим за отзыв. Я не уверен, как использовать этот код с Angular UI - Bootstrap typeahead, хотя? – ellier7

, так что вы хотите, чтобы я это сделал? –

Вы можете оставить небольшой промежуток с изображением в нижней части машинописный (или там, где вы хотите) и добавить класс нг -show = "loader" затем создайте $ scope.loader, и когда вы нажмете запрос, сделайте его истинным и при успехе сделайте $ scope.loader = false.

источник

2018-01-28 16:23:30

Показать загрузчик с помощью bootstrap typeahead-loading

ответ

Смежные вопросы