显示离子加载器在NG重复渲染数据的过程之间

show ionic loader in between the process of ng-repeat rendering data

本文关键字:数据 之间 过程 加载 NG 显示      更新时间:2023-09-26

这个问题对你来说似乎很愚蠢,但我只想知道是否有可能在通过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 调用。