0

Saludos.

Resulta que tengo una vista en la que dentro de un <select></select> cargo todos los municipios de Colombia, unos 1122 registros, el problema es que cuando entro a esta vista mientras se cargan estos datos se me bloquean los demás inputs.

Este es el servicio que me trae los datos.

sigc.factory('DptoMpioService', ['$http', '$q', function($http, $q) {
return {
    dptos: dptos,
    mpios: mpios,
    mpios_by_dpto: mpios_by_dpto
}

function mpios()
{
    var defered = $q.defer();
    var promise = defered.promise;
    var config = {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    };

    $http.get('index.php/Dptompio/mpios/', config)
        .success(function(data) {
            defered.resolve(data);
        }).error(function(err) {
            defered.reject(err)
        });
    return promise
}......

El controlador

DptoMpioService.mpios().then(function(response) {
                if(response.status == 200) {
                    console.log(response.data)
                    $scope.municipalitys_ = response.data;
                }else {
                    $scope.municipalitys_ = {};
                }
            }).catch(function(fallback){
                console.log(fallback)
            })

El html

<div class="col m4 s12">
    <div class="row row-form-my">
        <label class="label-my" for="expeditionplace">Lugar de Expedición</label>
        <select ng-model="user.expeditionplace" name="expeditionplace" id="expeditionplace" class="browser-default select-my">
            <option value="" selected>--Elige--</option>
            <option ng-if="municipalitys_" ng-repeat="municipality in municipalitys_" value="{{municipality.id}}">{{municipality.name}} ({{municipality.namedpto}})</option>
        </select>
      </div>                        
</div>

Al parecer el problema no es la consulta, porque los datos llegan con buen tiempo de la base de datos, según el consolo.log() al parecer el problema esta en el ng-repeat creo.

Mi pregunta es si existe un mejor forma de hacer esto y que los demás inputs no se congelen, mientras se cargan estos datos.

De antemano muchas gracias.

3 respuestas 3

2

Prueba a usar ngOptions en lugar de ngRepeat.

Según la documentación de AngularJS con ngRepeat se reduce el rendimiento a partir de 2000 opciones con Chrome e IE. La documentación está en el siguiente enlace, en el apartado de Choosing between ngRepeat and ngOptions.

1
  • Además creo que cargar los 12** municipio en un solo select no es óptimo. Y si hay municipios con el mismo nombre en diferentes zonas geográficas? Puedes usar categorías, por ejemplo: Elegir Departamentos, Luego provincias y luego distritos Commented el 11 oct. 2016 a las 17:06
1

Más allá de intentar mejorar el rendimiento al construir el select creo que también deberías preguntarte si el usuario merece ver un select con 1000 opciones!. Podrías agregar un componente de select que permita buscar entre los elementos de la lista. Por ejemplo angular-ui/ui-select

https://github.com/angular-ui/ui-select

0

Primeramente lo mejor seria usar un ngOptions para esto, agregando el track by $index, o el key que te sea mas util.

En tu servicio te recomiendo quitar esa promesa que no es necesaria, y queda mas legible tu codigo.

function mpios()
{
    var config = {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    };

    $http.get('index.php/Dptompio/mpios/', config)
        .then(function(res) {
            return res;
        }).catch(function(err) {
            console.error(err)
        });
}

Como un extra considera implementar un searchbox, si puedes cargar primero los estados y en base a eso, cargar municipios.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.