在ng-repeat渲染数据的过程中显示离子加载器

时间:2016-02-26 10:01:51

标签: javascript html angularjs ionic-framework angularjs-ng-repeat

这个问题我对你来说似乎很傻但我只是想知道是否有可能在下拉列表中通过ng-repeat显示离子加载器的过程。我已经goggled并找到两个指令,一个用于后渲染还有其他用于完成渲染两者都很好但我真的很困惑,我怎么能在整个过程中显示和隐藏我的离子加载器。

这是我的一些代码: -

<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");
					});

任何人都可以告诉我如何在下拉列表中重复渲染数据时向用户显示加载器。我甚至尝试为showloader()和hideloader()创建两个不同的函数。 showLoader当用户在下拉列表中选择一些值并且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;
								}
							}

						}

					}

任何帮助将不胜感激, 感谢

1 个答案:

答案 0 :(得分:1)

这种功能永远不会花这么长时间来执行。

我认为你应该尝试删除内部循环中的大量LocalStorage访问。从我所看到的,你可以使用局部变量(内存中)做你想做的一切。

$ ionicLoading适用于需要时间的异步调用,就像AJAX调用一样。