How to update model when done ng-change in Angularjs?

Asked

Viewed 684 times

0

Good night,

I have two select option the first I have a ng-change that filters by php the data that will be shown in the second select what happens and that it filters well through the browser console I can see that it filters well returns the JSON filtered on does not show the options in select how I can fix it ?

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

})
php angularjs

1 answer

0


The two controls of the select type are in different scopes, so the id_district method of the Listaconselhos control is not recognized.

With some changes it is possible to reach the desired result, see example below.

<!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>

With a little more changes you will have cleaner code as example below.

<!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>

  • I tried the first way but it does not work the second I did not understand very well can give an example with the code I have as it would ?

  • I tried here the second way but do not show the options can see I edit the question see if this well or if something is missing now in the view

  • I updated the example to make it clearer.

  • The second option worked right for me

Browser other questions tagged php angularjs

You are not signed in. Login or sign up in order to post.