显示离子加载器在NG重复渲染数据的过程之间
show ionic loader in between the process of ng-repeat rendering data
这个问题对你来说似乎很愚蠢,但我只想知道是否有可能在通过ng-repeat在下拉菜单中呈现数据的过程之间显示离子加载器。我目了一下,发现有两个指令,一个用于后期渲染,另一个用于完成渲染,两者都很好用,但我真的很困惑,我如何在整个过程中显示和隐藏我的离子加载器。
这是我的一些代码:-
<label class="item item-input"> <select class="input-select"
ng-model="user.country.value"
ng-change="selectedCountry(user.country.value)">
<option ng-selected="country.value==user.country.value"
ng-repeat="country in results" value="{{country.value}}">
{{country.name}}</option>
<option value="" disabled hidden>{{'checkoutPage.country' |
translate}}</option>
</select>
</label>
<label class="item item-input" ng-if="showDropDownInStateLabel()">
<select class="input-select" ng-model="userState.states.region_id"
ng-change="selectedState(userState.states.region_id)">
<option ng-selected="states.region_id==userState.states.region_id" ng-repeat="states in StatesArray" on-finish-render="ngRepeatFinished"
value="{{states}}">{{states.name}}</option>
<option value="" disabled hidden>{{'checkoutPage.state' |
translate}}</option>
</select>
</label>
这是指令:-
app.directive('onFinishRender', function($timeout) {
return {
restrict : 'A',
link : function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
这是事件的侦听器:-
$scope.$on('ngRepeatFinished', function(
ngRepeatFinishedEvent) {
alert("rendering ends here");
});
任何人都可以告诉我,当ng-repeat在下拉列表中渲染数据时,如何向用户显示加载器。我什至尝试为showloader()和hideloader()制作两个不同的函数。当用户在下拉列表中选择某个值时,showLoader i 调用,hideLoader 在 $scope.$on 函数中得到调用。
实际上,我有两个下拉菜单,一个是针对国家/地区的,另一个是针对其各自状态的。当用户选择国家/地区时,状态下拉列表对用户可见.整个过程在渲染中花费了一些时间,这使得应用程序看起来像挂起的用户,所以我只想向用户显示一个加载器以避免这种错觉。
这是查找哪个国家/地区具有状态数组以及根据哪些统计信息下拉列表对用户可见的功能:-
$scope.user = {};
$scope.selectedCountry = function(value) {
// alert(value);
$scope.data.region = '';
if (angular.isString(LocalStorage
.getData("StateSelected"))) {
LocalStorage.setData("StateSelected", "");
LocalStorage.setData("Statename", "");
}
if (angular.isString(LocalStorage
.getData("Addressregion"))) {
LocalStorage.setData("Addressregion", "");
}
$scope.user.country_id = value;
LocalStorage.setData("CountrySelected", value);
for ( var c = 0; c < LocalStorage
.getObject("getCountriesresult").length; c++) {
if (value == LocalStorage
.getObject("getCountriesresult")[c].value) {
if (LocalStorage
.getObject("getCountriesresult")[c].state.length > 0) {
shouldShowDropdown = true;
$scope.StatesArray = LocalStorage
.getObject("getCountriesresult")[c].state;
} else {
shouldShowDropdown = false;
}
}
}
}
任何帮助将不胜感激,谢谢
这种功能永远不会花费这么长时间来执行。
我认为您应该尝试删除循环内的大量 LocalStorage 访问。从我所看到的,您可以使用局部变量(内存中)做任何您想做的事情。
$ionicLoading适用于需要时间的异步调用,例如 AJAX 调用。
相关文章:
- 函数参数中的数据与指定变量之间的任何性能差异
- 在控制器和数据对象之间同步数据
- 使用服务(AngularJS)在控制器之间共享数据
- AngularJS中的页面之间共享数据返回空
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- Mongoose查询在两个日期时间之间提取数据
- 使用Angularjs在两个不同页面的控制器之间共享数据
- 使用JavaScript在网页之间进行数据传输
- 如何在网页之间存储数据
- 如何在Windows Phone 8.1应用程序中在C#和Javascript之间传递数据或通信
- JS和PHP复杂数据之间的桥梁
- Windows 8.1 应用中应用数据和会话数据之间的差异
- 在使用Ajax仅检索数据库中的数据之间,如何更好地从html结构中的数据库中检索数据
- Google Analytics、GoSquared和我自己的统计数据之间存在巨大的页面浏览量差异
- 显示数据之间的依赖关系(映射/矩阵)
- 如何减少客户端在socket.io中接收数据之间的时间差
- 流星JS铁路由器:共享公共'数据'之间的路线
- 共享数据之间的猫鼬中间件方法前保存和后保存
- D3.js:时间刻度和数据:刻度和数据之间的一些像素间隙
- 在ExtJS存储中使用后,会导致数据之间的差异