显示加载微调自举typeheadhead加载

我正在构建一个Angular应用程序，使用uib-typeahead，我无法使用加载属性。当打印头正在搜索大型数据集时，我想显示一个微调框。这里是我的代码：显示加载微调自举typeheadhead加载

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

，当我在文本框中我打字无图像显示。我应该为is_Loading分配一个$ scope变量吗？使用ng-style

来源

2017-02-21 ellier7

处理一下试试这个

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

显示加载微调自举typeheadhead加载

回答

相关问题