0

私は Web ページにほぼ 20 ～ 25 個のコンボボックスがあり、それぞれが ajax を使用して webapi からデータを非同期に取得し、すべてのコンボボックスにデータが入力されると、選択した値をすべてのコンボボックスに表示するアプリケーションに取り組んでいます、データベースにあるデータに基づいています。

これを行うには、ページの読み込み時に、最初に進行状況バーを表示し、次に $.when(すべての ajax 呼び出しを行います) を使用します。

すべてのコンボボックスをロードするのに時間がかかり、ユーザーはプログレス バーが非表示になるまで待たなければなりません。

質問: ユーザーがコンボボックスを開いたときにのみコンボボックスのデータを取得し、データベースから取得した選択した値を表示できるようにする方法はありますか?

例: Web ページに Country コンボボックスがあり、国を選択してデータベースに保存するとします。ユーザーが初めてそのページにアクセスしたとき、国は選択されていません。その時点では、ユーザーがコンボボックスを開いたときにのみデータを簡単にロードできますが、ユーザーが選択して（たとえば米国）[保存]ボタンをクリックすると、次にユーザーがアクセスしたときにデータを簡単にロードできます。そのページでは、コンボボックスで「米国」が選択されていることを確認したいと考えています。国のデータを読み込んでその項目を選択しない限り、国 (「米国」) を選択することはできません。ページ。

すべてのコンボボックスをオンデマンドでロードしたいのですが、UI のデータベースに保存されている選択値も表示したいと考えています。

全体的なアイデアは、そのページの読み込みを高速化し、オンデマンドにすることです。

アドバイスをいただければ幸いです。

4

1 に答える 1

0

20 ～ 25 個のコンボボックスの読み込みに非常に時間がかかるのは少し奇妙に思えます。または、コンボごとのオプションは大きなリストですか? データ量はそれほど多くないはずです。

とにかく、サーバーが選択したアイテムを含むアイテムを返すページの読み込み時にリクエストを実行すると、角度のあるアプリでこれらのコンボを設定できます。db.myCollection.find( { $where: "itemSelected != ''" } );サーバーは(MongoDB 構文)のような db クエリを実行し、JSON として返すことができます。

したがってcheckForceLoad、おそらく正しい名前ではありません。initItemsバックエンドからのページ読み込み時に選択したアイテムを読み込む場所のようなものにする必要があります。

他のコンボは、クリック後にのみ入力されます。

以下のデモをご覧ください (ここでは実行されていません --> localstorage の SO 問題のようです) またはこの作業中のfiddleをご覧ください。

デモでは、利用可能なバックエンドがないため、localstorage を使用して動作をシミュレートしました。コンボ クリックでの読み込みは、読み込みの遅延を示すためにタイムアウトによって遅延されます。

angular.module('demoApp', ['LocalStorageModule'])
	.run(function($rootScope, localStorageService) {
    	// init test data here because we don't have a backend
    	$rootScope.modelNames = [];
    	
    	var data;
    
    	for ( var index=0; index < 20; index++ ) {
    		$rootScope.modelNames.push({name: 'test' + index});
            data = localStorageService.get('test' + index);
            if (!data) {
                localStorageService.set('test' + index, {
                    model: '',
                    options: [{
                        value: 'option-1',
                        text: 'Option 1'},
                              {
                                  value: 'option-2',
                                  text: 'Option 2'},
                              {
                                  value: 'option-3',
                                  text: 'Option 3'}]
                });
        	}
        }
	})
	.config(function (localStorageServiceProvider) {
    	localStorageServiceProvider
        	.setPrefix('demoApp');
	})
	.factory('modelService', function($q, $timeout, localStorageService) {
		var service = {
            checkForceLoad: function(names) {
                console.log('check force load');
                // later returned from array something find().where('model' != '')
            	var deferred = $q.defer(); // immediatetly resolved promise --> later $http
                var storedObj;
                
                angular.forEach(names, function(nameObj) {
                    // later just mapping required
                	storedObj = localStorageService.get(nameObj.name);
                	if (storedObj.model !== '') {
                        console.log('force', storedObj.model);
                        nameObj.forceLoad = true;
                    }
                });
                console.log('checkforce', names);
                
                //$timeout(function() {
                deferred.resolve('checked models');
                //}, 500); // simulate async
                return deferred.promise;
            },
            get: function(name) {
            	var deferred = $q.defer(); // immediatetly resolved promise --> later $http
                var storedObj = localStorageService.get(name);
                $timeout(function() {
                    deferred.resolve(storedObj);
                }, 500); // simulate async
                return deferred.promise;
            },
            save: function(name, model) {
            	var deferred = $q.defer(); // immediatetly resolved promise --> later $http	
                var storedData = localStorageService.get(name);
                angular.extend(storedData, {model: model});
                localStorageService.set(name, storedData);
                deferred.resolve(model);
                return deferred.promise;
            }
        };
    	return service;
	})
	.directive('comboBox', function($rootScope, modelService) {
    	modelService.checkForceLoad($rootScope.modelNames); // runs once
    
		return {
            restrict: 'E',
            scope: {
            	modelName: '=',
                load: '='
            },
        	template: '<div><select ng-model="model" ng-click="loadData()" ng-change="save(model)">'+
                '<option ng-selected="model == option.value" ng-repeat="option in options" value="{{option.value}}">{{option.text}}</option>'+
            	'</select></div>',
            controller: function($scope, modelService) {
                
        		$scope.save = function(model) {
                    //console.log('saving now...');
    				modelService.save($scope.modelName, model)
                        .then(function(result) {
                    		console.log('successfully saved', result);
                    });
    			};
                $scope.loadData = function() {
                    console.log('loading data...');
                    if ( !$scope.options ) {                					
                      	modelService.get($scope.modelName).then(function(result) {
                            console.log('loaded data');
                            $scope.model = result.model;
                            $scope.options = result.options;
                            //$scope.$apply();
        				});
                    }
                };
                
                //console.log($scope.load);
                if ( $scope.load ) {
                    //console.log('load on start');
                    $scope.loadData();
                }
        	}
        };
	})
    .controller('mainController', function ($scope, localStorageService, modelService) {
    	$scope.load = true;
    	console.log($scope.modelNames);
    	$scope.clear = function() {
        	localStorageService.clearAll();
            alert('re-run app manually');
        };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <p>Comboboxes are saved in localstorage if changed. On next run only the data with selected values will be loaded. Other combos are loaded on demand.</p>
    <button ng-click="clear()">clear localstorage (just for testing)</button>
    <combo-box model-name="nameObj.name" load="nameObj.forceLoad" ng-repeat-start="nameObj in modelNames"></combo-box>
    {{name.forceLoad}}
    <div ng-repeat-end=""></div>
</div>

于 2015-08-25T23:21:01.757 に答える