Question

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

struct
{
    int a : 10;
} foo;

我在文本框中输入时没有显示图像。我应该为is_Loading分配$ scope变量吗？

Answer 1

使用ng-style

处理它

试试这个

＆＃13;

<!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>

＆＃13;

Answer 2

你可以在你的预先设定的底部（或任何你想要的地方）保持小图片的图像并添加类 ng-show =“loader”然后创建$ scope.loader并在你点击请求时它是真的并且在成功时使 $ scope.loader = false 。

使用bootstrap typeahead-loading显示加载微调器

2 个答案: