How to update a dynamic select with AngularJS and ng-options

Navigation
0

It turns out that I have two selections, one parent and one child that will load depending on what was selected in the parent. All the data is brought from an API with aJax of angularJS, and everything goes well, it turns out that I print on the screen the result brought for the child select and it is correct, only that in the select the values are not updated ...

This is the controller 

        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);






            });






        });

and this 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>
    
asked by Anthony Medina 01.07.2017 в 20:00
source

1 answer

1

Well in principle, you are using% jquery% co_ when you are working with Angular. You must be consistent and if you are implementing angular, that events are handled by him.

I would initially change this part: 

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

by: 

$scope.clickPost = function(){

and in the view (I do not know which element is post, but in a general way I represent it as a button and I put the id to refer to your example) 

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

At the same time the ending with the ready, would be the initialization of your controller, is something that we learned in jquery and wait for the onClick , but angular has its own solution to it with the function onReady . 

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

On the other hand, the dependencies injected into the controller are present in all the functions performed within it without the need to make the reference pass. This would work perfectly and I even think that it would solve your problem. 

function obtenerTribunal(idCategoria){

Now, going further, when using some javascript functions directly, even though we see that a value is being assigned to some of our scope variables, angular does not recognize those values and it is necessary to use $ scope . $ apply, so that the view is notified that there is a change in those 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;
    });
...

For more details of that I leave this link: $ scope. $ apply

    
answered by 10.07.2017 в 00:33
Laravel count days within a period of dates Problems installing selenium on Mac