顯示加載微調自舉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加載

回答

相關問題