显示加载微调器与引导预加载答案

【问题标题】：Display loading spinner with bootstrap typeahead-loading显示加载微调器与引导预加载
【发布时间】：2017-02-21 01:45:43
【问题描述】：

我正在构建一个使用 uib-typeahead 的 Angular 应用程序，但我在使用加载属性时遇到了问题。我想在预输入搜索大型数据集时显示一个微调器。这是我的代码：

<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 吗？

【问题讨论】：

标签： angularjs spinner loading bootstrap-typeahead

【解决方案1】：

使用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>

【讨论】：

感谢您的回复。我不确定如何将此代码与 Angular UI - Bootstrap typeahead 一起使用？

【解决方案2】：

您可以在预先输入的底部（或任何您想要的地方）保持较小的图像跨度并添加类 ng-show="loader" 然后创建 $scope.loader 并在您点击请求时生成它是真的并且成功时使 $scope.loader = false.

【讨论】：