0

Resulta que tengo dos select, uno padre y uno hijo que va a cargar dependiendo de lo seleccionado en el padre. Todos los datos son traidos de un API con ajax de angularJS, y todo va bien, resulta que imprimo en pantalla el resultado traido para el select hijo y esta correcto, solo que en el select no se actualiza los valores ...

Este es el controlador

        app.controller('acto', function($rootScope,$scope,$http,$localStorage,$location,$window) {
            $rootScope.validateToken();
            $rootScope.objeto = "Programador de Actos";

            if (typeof $localStorage.evento !== 'undefined') {
                    if($localStorage.evento !== "") {

                        $scope.data = $localStorage.evento;
                    } 
                } 

            $('#post').on('click', function() {
                if($scope.data==undefined) { $rootScope.toast("Rellene los campos"); return; }
                if($scope.data.titulo==undefined || $scope.data.titulo == "") {  $rootScope.toast("Campo 'Titulo' vacio"); return; }
                if($scope.data.inicio==undefined || $scope.data.inicio == "") { $rootScope.toast("Campo 'Inicio' vacio");  return;}
                if($scope.data.fin==undefined || $scope.data.fin == "") { $rootScope.toast("Campo 'Fin' vacio");  return;}
                if($scope.data.descripcion==undefined || $scope.data.descripcion == "") { $rootScope.toast("Campo 'Descripcion' vacio");  return;}

                $rootScope.post('api/acto',$scope.data).then(function(response) {
                    var date = $rootScope.formatDate($scope.data.inicio, "yyyy-MM-dd");
                    localStorage.removeItem("ngStorage-evento");
                    $scope.data = {};
                    $window.location.href = '#!/programador/' + date;
                }, function() {
                    $rootScope.alert("Ocurrio un Error interno");
                });
            });

            function obtenerTipoTribunal($http,$scope) {
                $http.get('api/tipo_de_tribunal',{        
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': $localStorage.token
                      }
                    }).then(function(data) {
                        var array = data == null ? [] : (data.data.data instanceof Array ? data.data.data : [data.data.data]);
                        $scope.JSONtipoTribunal  = array;
                        $scope.selCategorias   = $scope.JSONtipoTribunal;
                    }, function(response) {
                        console.log('Error: ' + response);
                    });


            }

            function obtenerTribunal($http,$scope,idCategoria){
                console.log(idCategoria);
                var filtro = {
                    donde : "where id_tipo_tribunal = " + idCategoria
                };

                var filter = JSON.stringify(filtro).toString();
                $http.get('api/tribunal?filter=' + filter,{        
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': $localStorage.token
                      }
                    }).then(function(data) {
                        var array = data == null ? [] : (data.data.data instanceof Array ? data.data.data : [data.data.data]);

                        $scope.JSONTribunal  = array;
                        $scope.selPistos   = $scope.JSONTribunal;


                    }, function(response) {
                        console.log('Error: ' + response);
                    });   
            }
            $scope.mostrarPistos = function() { 
                    // $scope.selCategorias NOS TRAE EL VALOR DEL SELECT DE CATEGORIAS
                    obtenerTribunal($http,$scope,$scope.selCategorias);


                };

            angular.element(document).ready(function() {

                $rootScope.tribunal = [];
                $rootScope.tipo_de_tribunal = [];

                obtenerTipoTribunal($http,$scope);






            });






        });

y este el HTML

<select ng-model="selCategorias" class="form-control" ng-change="mostrarPistos()" ng-options="x.id as x.descripcion for x in JSONtipoTribunal">
<option value="" disabled selected>Selecciona una opcion</option>
</select>

<select ng-model="selPistos" class="form-control" ng-options="y.id as y.numero for y in JSONTribunal">
<option value="" disabled selected>Selecciona una opcion</option>
</select> 

1
  • ¿Lograste hacerlo funcionar? Tienes una respuesta, ¿te fue útil?
    – fredyfx
    Commented el 16 feb. 2018 a las 1:51

1 respuesta 1

1

Bueno en principio, estas usando un onClick de jquery cuando estas trabajado con Angular. Debes ser consecuente y si estas implementando angular, que los eventos los maneje él.

Yo en principio cambiaria esta parte:

 $('#post').on('click', function() {

por:

$scope.clickPost = function(){

y en la vista (desconozco que elemento es post, pero de forma general lo represento como un botón y le coloco el id para hacer referencia a tu ejemplo)

<button id="post" ng-click="clickPost()">Post</button>

A su vez el final con el ready, seria la inicialización de tu controlador, es algo que aprendimos en jquery esperar el onReady, pero angular tiene su propia solucion a ello con la funcion $onInit.

this.$onInit = function(){
    //Init controller
}

Por otro lado, las dependencias inyectadas en el controlador están presentes en todas las funciones que se hagan dentro del mismo sin necesidad de hacer el pase de referencia. Esto funcionaria perfectamente y creo incluso que solucionaría tu problema.

function obtenerTribunal(idCategoria){

Ahora, ya yendo mas allá, cuando se usan algunas funciones de javascript directamente, por mas que veamos que se le esta asignando un valor a algunas de nuestras variables de scope, angular no reconoce esos valores y se hace necesario usar $scope.$apply, para que la vista sea notificada que hay un cambio en esas variables:

...
.then(function(data) {
    var array = data == null ? [] : (data.data.data instanceof Array ? data.data.data : [data.data.data]);
    $scope.$apply(function () {
        $scope.JSONTribunal  = array;
        $scope.selPistos   = $scope.JSONTribunal;
    });
...

Para mas detalle de eso te dejo este link: $scope.$apply

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.