0

Boa noite,

Tenho dois select option o primeiro eu tenho um ng-change que filtra pelo php os dados que serão mostrados no segundo select o que acontece e que ele filtra bem pelo console do navegador eu consigo ver que ele filtra bem retorna o JSON filtrado no não aparece as opções no select como posso resolver isso ?

View

<div ng-controller="FiltraEstabelecimentos">
        <form>
            <div class="row">
                <div class="col">
                    <label ng-controller="ListaDistritos" style="border-radius: 10px; margin: 0px 0px 10px 0px;" class="item item-input item-select">
                        <div class="input-label">
                            Distrito
                        </div>
                        <select ng-controller="ListaConcelhos" ng-model="distrito" ng-options="lista_distritos as lista_distritos.titulo for lista_distritos in distritos" ng-change="id_distrito()"></select>
                    </label>
                    <label ng-controller="ListaConcelhos" style="border-radius: 10px;" class="item item-input item-select">
                        <div class="input-label">
                            Concelho
                        </div>
                        <select ng-model="concelho" ng-options="lista_concelhos as lista_concelhos.titulo for lista_concelhos in concelhos"></select>
                    </label>
                </div>
            </div>
            <div style="margin:0px 10px 0px 10px;">
                <button type="submit" ng-click="filtra_estabelecimentos()" style="background-color: #CA5B60; border:#CA5B60; border-radius: 10px;" class="button button-block button-positive">
                    <i class="ion-search"></i> Pesquisar
                </button>
            </div>
        </form>  
    </div> 

Controllers

.controller('ListaDistritos', function($scope, $http) {
    $http.get("https://www.sabeonde.pt/api/api_distritos.php").success(function (data) {
        $scope.distritos = data;
    });
})
.controller('ListaConcelhos', function($scope, $http, $stateParams) {
    $scope.id_distrito= function (){
        $http.get("https://www.sabeonde.pt/api/api_concelhos.php?id_distrito="+$scope.distrito.id).success(function (data) {
            $scope.$watch('data', function(newValue, oldValue) {
                console.log(newValue);
                $scope.concelhos = newValue;
            });
        });
    };

})

1 Resposta 1

0

Os dois controles do tipo select estão em escopos diferentes, por tanto, o método id_distrito do controle ListaConselhos não é reconhecido.

Com algumas alterações é possível chegar ao resultado desejado, ver exemplo abaixo.

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body ng-app="myApp">

<div id="entityScope">
    <form>
        <div class="row">
            <div class="col">
                <label style="border-radius: 10px; margin: 0px 0px 10px 0px;" class="item item-input item-select">
                    <div class="input-label">
                        Distrito
                    </div>
                    <select ng-controller="ListaDistritos" id="t1" ng-model="distrito" ng-options="lista_distritos as lista_distritos.titulo for lista_distritos in distritos"></select>
                </label>
                <label ng-controller="ListaConcelhos" id="t2" style="border-radius: 10px;" class="item item-input item-select">
                    <div class="input-label">
                        Concelho
                    </div>
                    <select ng-model="concelho" ng-options="lista_concelhos as lista_concelhos.titulo for lista_concelhos in concelhos"></select>
                </label>
            </div>
        </div>    
    </form>  
<div>

<script>

var app = angular.module('myApp', []);

app.controller('ListaDistritos', function($scope, $http) {
    $http.get("https://www.sabeonde.pt/api/api_distritos.php").success(function (data) {
        $scope.distritos = data;
    });
}).controller('ListaConcelhos', function($scope, $http) {    
    $scope.id_distrito= function (){
        var scope1 = angular.element($('#t1')).scope();    
        if (scope1.distrito != undefined) {
            $http.get("https://www.sabeonde.pt/api/api_concelhos.php?id_distrito="+scope1.distrito.id).success(function (data) {

                $scope.concelhos = data;
            });
        }
    };
});

$( document ).ready(function() {
    setTimeout(function() { 
        var scope1 = angular.element($('#t1')).scope(); 
        scope1.$watch('distrito.id', function(newValue, oldValue) {
            var scope2 = angular.element($('#t2')).scope(); 
            scope2.id_distrito();
        });
    }, 300);
});

</script>

</body>
</html>

Com um pouco mais de alterações você terá um código mais limpo conforme exemplo abaixo.

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body ng-app="myApp">

<div id="entityScope" ng-app="myApp" ng-controller="myCtrl">
    <form>
        <div class="row">
            <div class="col">
                <label style="border-radius: 10px; margin: 0px 0px 10px 0px;" class="item item-input item-select">
                    <div class="input-label">
                        Distrito
                    </div>
                    <select ng-model="distrito" ng-change="ListaConcelhos()" ng-options="lista_distritos as lista_distritos.titulo for lista_distritos in distritos"></select>
                </label>
                <label style="border-radius: 10px;" class="item item-input item-select">
                    <div class="input-label">
                        Concelho
                    </div>
                    <select ng-model="concelho" ng-options="lista_concelhos as lista_concelhos.titulo for lista_concelhos in concelhos"></select>
                </label>
            </div>
        </div>    
    </form>  
<div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

    debugger;

    $scope.ListaDistritos = function() {
        $http.get("https://www.sabeonde.pt/api/api_distritos.php").success(function (data) {
            $scope.distritos = data;
        });
    }

    $scope.ListaDistritos();

    $scope.ListaConcelhos = function() {  
        debugger;      
        $http.get("https://www.sabeonde.pt/api/api_concelhos.php?id_distrito="+$scope.distrito.id).success(function (data) {            
            $scope.concelhos = data;
        }); 
    }
});

</script>

</body>
</html>
4
  • Tentei a primeira forma mas nao funciona a segunda nao percebi muito bem pode dar um exemplo com o codigo que tenho como ficaria ? Commented 28/10/2015 às 21:39
  • Tentei aqui a segunda forma mas nao aparece as opçoes pode ver vou editar a pergunta ver se esta bem ou se falta agora alguma coisa na view Commented 28/10/2015 às 22:06
  • Atualizei o exemplo para deixar mais claro. Commented 29/10/2015 às 0:35
  • A segunda opção funcionou certinho para mim Commented 29/10/2015 às 11:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .