如何显示加载器，当我从下拉菜单中选择的东西?意味着从后端加载数据时，它应该显示一些事件，如旋转器

how to show loader when i select somthing from dropdown ?means while loading data from backend it should show some event like spinner

本文关键字：加载 显示 数据 意味着 后端 事件 旋转 选择 何显示 下拉菜单      更新时间：2023-09-26

这是我的HTML表单div

<div class="col-lg-2 ">                                              
    <select name="limitCount" id="limitCount" ng-model="limitCount"  
        class="form-control col-md-2 panel-refresh"              
        ng-change="filterChanged()">                             
        <option value=0>All Records</option>                         
        <option value="1">1 Record</option>                          
        <option value=5 selected>5 Records</option>                  
        <option value=10>10 Records</option>                         
        <option value=25>25 Records</option>                         
        <option value=50 selected>50 Records</option>                
        <option value=100 selected>100 Records</option>              
        <option value=200 selected>200 Records</option>              
        <option value=300 selected>300 Records</option>              
        <option value=500 selected>500 Records</option>              
        <option value=1000 selected>1000 Records</option>            
    </select>                                                        
</div>

这是div

的控制器
$scope.filterChanged = function () {
    controller.resetGraph = true;
    loadGraphData();
};

现在我想，当我从选择下拉菜单中选择时，它应该在ui中显示一些旋转器(如一些加载器)，直到数据从mongodb获取。请尽快帮助我。我必须完成这项工作。现在我正在使用这个，但是它根本不起作用

$scope.$on('panel-refresh', function (event, id) {
    spinnerId = id;
    $scope.find();
});

你在这个近控制器中有打字错误。resetGraph = true;$s，比如$s是什么?

在这里，我将向您展示如何允许spinner在数据加载后显示和隐藏。

<div class="col-lg-2 ">   
<div ng-show="loading" > <img scr="" alt="" /> </div>                                           
<select name="limitCount" id="limitCount" ng-model="limitCount"  
        class="form-control col-md-2 panel-refresh"              
        ng-change="filterChanged()">                             
    <option value=0>All Records</option>                         
    <option value="1">1 Record</option>                          
    <option value=5 selected>5 Records</option>                  
    <option value=10>10 Records</option>                         
    <option value=25>25 Records</option>                         
    <option value=50 selected>50 Records</option>                
    <option value=100 selected>100 Records</option>              
    <option value=200 selected>200 Records</option>              
    <option value=300 selected>300 Records</option>              
    <option value=500 selected>500 Records</option>              
    <option value=1000 selected>1000 Records</option>            
</select>
</div>

现在在你的控制器中定义一个变量:

$scope.loading = false // Initially false to hide spinner

现在当数据过滤器或其他东西时你需要像这样分配布尔值为真:

$Scope.filterChanged = function () {
    $scope.loading = true// Allow spinner to load
    controller.resetGraph = true;$s
    loadGraphData().then(function(){
    $scope.loading = false// Allow spinner to stop load on finish data lading
     });
};

相关文章：