Question

我有一个简单的下拉列表，它是在select的帮助下完成的。下拉菜单在正常流程中工作正常，但是当我更新页面或有时刷新页面时，由于后端响应较晚，下拉菜单中的所选值将变为空。

HTML

      <div class="col-lg-12 col-md-12" ba-panel ba-panel-title="Registration" ba-panel-class="" ng-init="driver.phoneNumberPrefixFunc();">

<div class="col-lg-12 col-md-12" ba-panel ba-panel-title="Registration" ba-panel-class="" ng-init="driver.phoneNumberPrefixFunc();driver.getVehicleTypes();driver.getUnArchBankListing()">

  <form class="form-vertical" name="driver.registrationForm" ng-submit="driver.register(driver.registrationInformation);">

            <select class="form-control" id="phonePrefix" name="phonePrefix" ng-model="driver.registrationInformation.phoneNumberPrefix"
                required>
                <option value="" selected>Select Code</option>
                <option ng-repeat="item in driver.registrationInformation.phonePrefix" value="{{item.code}}">{{item.code}}</option>
            </select>

        </form>

    </div>

控制器

    function editDriverDetails() {
            phoneNumberPrefixFunc();
            var params = {
                id: $stateParams.driverId
            };
            return driverServices.getDriverDetails(params).then(function (res) {
                if (res.success == "1") {
                    driverData = res.data.driver;
driver.registrationInformation.phoneNumberPrefix = driverData.phoneNumberPrefix;
                    usSpinnerService.stop('spinner-1');
                } else {
                    usSpinnerService.stop('spinner-1');
                    toastr.error(res.message, 'Driver');
                }
            });
        };

编辑表单时会调用

editDriverDetails函数。如您所见，由于我需要电话号码前缀列表，因此我一开始会致电phoneNumberPrefixFunc()。下面是功能代码。

function phoneNumberPrefixFunc(data) {
        usSpinnerService.spin('spinner-1');
        return driverServices.phoneNumberPrefix(data).then(function (response) {
            if (response.success == '1') {
                usSpinnerService.stop('spinner-1');
                driver.registrationInformation.phonePrefix = response.data.countryCode;
            } else {
                usSpinnerService.stop('spinner-1');
                toastr.error(response.message);
            }
        });
    };

函数phoneNumberPrefixFunc会将对象列表放入下拉列表中，而driver.registrationInformation.phoneNumberPrefix是我在editDriverDetails函数中获得的预选值。现在有时phoneNumberPrefixFunc或editDriverDetails的响应很晚，这就是为什么我的下拉列表没有被填充的原因。我该如何解决？

Answer 1

我这样算出来。

Routes.js

 (function () {
        'use strict';
        angular.module('Driver', []).config(routeConfig);

        /** @ngInject */
        function routeConfig ($stateProvider, $urlRouterProvider) {

            function authentication (GlobalServices, $q, localStorageService, $state) {
                var d = $q.defer();
                var checkUser = localStorageService.get('user');
                if (checkUser !== null) {
                    d.resolve(checkUser);
                } else {
                    GlobalServices.currentUser().then(function (data) {
                        if (data.success === 0) {
                            $state.go('login');
                        } else {
                            localStorageService.set('user', data.data.account);
                            d.resolve(data.user);
                        }
                    });
                }
                return d.promise;
            }

            function phoneNumberPrefix ($q,driverServices) {
                var d = $q.defer();
                driverServices.phoneNumberPrefix().then(function (data) {
                    d.resolve(data.data.countryCode);
                });
                return d.promise;
            }

            function getVehicleTypes ($q,driverServices) {
                var d = $q.defer();
                driverServices.vehicleType().then(function (data) {
                    d.resolve(data.data.vehicleTypes);
                });
                return d.promise;
            }

            function getUnArchBankListing ($q,bankServices) {
                var d = $q.defer();
              bankServices.getUnArchiveBankListing({type : 'unarchive'}).then(function (data) {
                    d.resolve(data.data.banks);
                });
                return d.promise;
            }
  $stateProvider
                .state('drivers', {
                    url: '/drivers',
                    template: '<ui-view  autoscroll="true" autoscroll-body-top></ui-view>',
                    abstract: true,
                    // controller: 'DriverMainController',
                    title: 'Drivers',
                    sidebarMeta: {
                        icon: 'fa fa-motorcycle',
                        order: 3,
                    },
                    resolve: {
                        $user: authentication,
                        phoneData : function () {},
                        vehcileTypesData: function () {},
                        banksData: function () {}
                    },
                })
                .state('driverView', {
                    url: '/driver/:driverId',
                    templateUrl: '../app/pages/driver/driverView.html',
                    title: 'Profile',
                    controller: 'driverCtrl',
                    controllerAs: 'profile',
                    resolve: {
                        $user: authentication,
                        phoneData : function () {},
                        vehcileTypesData: function () {},
                        banksData: function () {}
                    },
                })
                .state('driverEdit', {
                    url: '/driver-edit/:driverId',
                    params: {
                        driverDetails: null,
                        driverId : null
                    },
                    templateUrl: '../app/pages/driver/registration/registration.html',
                    title: 'Driver Profile',
                    controller: 'driverCtrl',
                    controllerAs: 'driver',
                    resolve: {
                        $user: authentication,
                        phoneData : function ($q, driverServices) {
                            var d = $q.defer();
                            return phoneNumberPrefix($q, driverServices);
                        },
                        vehcileTypesData: function ($q, driverServices) {
                            var d = $q.defer();
                            return getVehicleTypes($q, driverServices);
                        },
                        banksData: function ($q, bankServices) {
                            var d = $q.defer();
                            return getUnArchBankListing($q, bankServices);
                        }
                    }
                });

            $urlRouterProvider.when('/drivers', '/drivers/registration');
        }

    })();

我没有使用ng-init="driver.phoneNumberPrefixFunc();"，而是确保仅在加载所需数据时打开页面。然后我可以像这样访问控制器中的数据。

controller.js

    (function () {
    angular.module('Driver').controller('driverCtrl', driverCtrl);

    driverCtrl.$inject = ['$scope', '$state','phoneData','vehcileTypesData','banksData'];

    function driverCtrl($scope, $state,phoneData,vehcileTypesData,banksData) {
        if(phoneData){
            driver.phonePrefix = phoneData;
                }
        if(banksData){
            driver.bankListing = banksData;
                }
        if(vehcileTypesData){
            driver.vehicleTypes = vehcileTypesData;
        }
 }
})();

Angular Js-select下拉列表在页面刷新上有时变为空，为什么？

1 个答案: