这是我的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
});
};