0

Этот вопрос мне кажется глупым для вас, но я просто хочу знать, что можно показать ионный загрузчик между процессом рендеринга данных в выпадающем списке на ng-repeat . Я изучил и нашел две директивы для последующего рендеринга, а другой для on-finish-render, оба работают хорошо, но я действительно смущен тем, что как я могу показать и скрыть свой ионный загрузчик в течение всего этого процесса.показать ионный загрузчик между процессом обработки изображений ng-repeat

вот некоторые из моего кода: -

<label class="item item-input"> <select class="input-select" 
 
\t \t \t ng-model="user.country.value" 
 
\t \t \t ng-change="selectedCountry(user.country.value)"> 
 
\t \t \t \t <option ng-selected="country.value==user.country.value" 
 
\t \t \t \t \t ng-repeat="country in results" value="{{country.value}}"> 
 
\t \t \t \t \t {{country.name}}</option> 
 
\t \t \t \t <option value="" disabled hidden>{{'checkoutPage.country' | 
 
\t \t \t \t \t translate}}</option> 
 
\t \t </select> 
 
\t \t </label> 
 

 
<label class="item item-input" ng-if="showDropDownInStateLabel()"> 
 
\t \t \t <select class="input-select" ng-model="userState.states.region_id" 
 
\t \t \t ng-change="selectedState(userState.states.region_id)"> 
 
\t \t \t \t <option ng-selected="states.region_id==userState.states.region_id" ng-repeat="states in StatesArray" on-finish-render="ngRepeatFinished" 
 
\t \t \t \t \t value="{{states}}">{{states.name}}</option> 
 
\t \t \t \t <option value="" disabled hidden>{{'checkoutPage.state' | 
 
\t \t \t \t \t translate}}</option> 
 
\t \t </select> 
 
\t \t </label>

здесь директива: -

app.directive('onFinishRender', function($timeout) { 
 
\t return { 
 
\t \t restrict : 'A', 
 
\t \t link : function(scope, element, attr) { 
 
\t \t \t if (scope.$last === true) { 
 
\t \t \t \t $timeout(function() { 
 
\t \t \t \t \t scope.$emit('ngRepeatFinished'); 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
});

здесь слушатель для события: -

$scope.$on('ngRepeatFinished', function(
 
\t \t \t \t \t \t \t ngRepeatFinishedEvent) { 
 
\t \t \t \t \t \t alert("rendering ends here"); 
 
\t \t \t \t \t });

может любой сказать мне, что, как показывает загрузчик для пользователя, когда нг-повтор визуализации данных в dropdown.I даже попробовать, сделав две различные функции для showloader() и hideloader (). showLoader я вызываю, когда пользователь выбирает какое-то значение в раскрывающемся списке, а hideLoader получает вызов в $ scope. $ on function.

Фактически у меня есть два выпадающих списка для стран, а другое для их соответствующих состояний. Когда пользователь выбирает страну, выпадающее окно состояния становится видимым для пользователя. Этот процесс потребовался некоторое время в рендеринге, которое делает приложение похожим на повешенное пользователю поэтому я просто хочу показать пользователю загрузчик, чтобы избежать этой иллюзии.

здесь есть функция, которая находит в какой стране имеют состояния массива и в соответствии с которым статистика ниспадающее меню есть видимая для пользователя: -

$scope.user = {}; 
 
\t \t \t \t \t $scope.selectedCountry = function(value) { 
 
\t \t \t \t \t \t // alert(value); 
 
\t \t \t \t \t \t $scope.data.region = ''; 
 
\t \t \t \t \t \t if (angular.isString(LocalStorage 
 
\t \t \t \t \t \t \t \t .getData("StateSelected"))) { 
 
\t \t \t \t \t \t \t LocalStorage.setData("StateSelected", ""); 
 
\t \t \t \t \t \t \t LocalStorage.setData("Statename", ""); 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t if (angular.isString(LocalStorage 
 
\t \t \t \t \t \t \t \t .getData("Addressregion"))) { 
 
\t \t \t \t \t \t \t LocalStorage.setData("Addressregion", ""); 
 

 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t $scope.user.country_id = value; 
 
\t \t \t \t \t \t LocalStorage.setData("CountrySelected", value); 
 

 
\t \t \t \t \t \t for (var c = 0; c < LocalStorage 
 
\t \t \t \t \t \t \t \t .getObject("getCountriesresult").length; c++) { 
 
\t \t \t \t \t \t \t if (value == LocalStorage 
 
\t \t \t \t \t \t \t \t \t .getObject("getCountriesresult")[c].value) { 
 
\t \t \t \t \t \t \t \t if (LocalStorage 
 
\t \t \t \t \t \t \t \t \t \t .getObject("getCountriesresult")[c].state.length > 0) { 
 
\t \t \t \t \t \t \t \t \t shouldShowDropdown = true; 
 
\t \t \t \t \t \t \t \t \t $scope.StatesArray = LocalStorage 
 
\t \t \t \t \t \t \t \t \t \t \t .getObject("getCountriesresult")[c].state; 
 
\t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t shouldShowDropdown = false; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t }

Любая помощь будет оценена, Благодаря

ответ

1

Этот вид функции никогда не должен занимать так много времени.

Я думаю, вы должны попытаться удалить огромное количество доступа LocalStorage внутри циклов. Из того, что я видел, вы можете делать все, что хотите, используя локальные переменные (в памяти).

$ ionicLoading прекрасно работает для асинхронных вызовов, требующих времени, например, вызова AJAX.