CODEWITHSUNDEEP
phpangularjs
Sasu Andrei
Sasu Andrei

Reputation: 11

AngularJS ng-change on select not triggering

I am new to AngularJS, I'm learning every day. But for 2 days I'm stuck at this ng-change problem. I have 2 select inputs. Second input has values based on first input option. I've done a example like that but now it doesn't work. I don't know if I have a combinemodule or if it is from ng-selected. here is my code:

<div class="col-lg-4">
            <section class="panel">
                <div class="panel-body">
                    <div class="panel-heading">Adresa teren</div>
                    <form class="form-horizontal" data-validate="parsley"
                          action="forms.php?forms=update_land_address" method="post" id="form_land_address">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">Judet</label>

                            <div class="col-sm-9">
                                <input type="hidden" id="land_address_judet_id"
                                       value="<?php echo $land_address_data[0]['id_judet']; ?>">
                                <div ng-app="land_address_judet_module" ng-controller="land_address_judet_controller">
                                <select id="land_address_judet" class="form-control" name="land_address_judet"  ng-change="ChangeJudet()" ng-model="uat_superior_module">
                                    <option ng-repeat="h in rez" value="h.id_judet"
                                            ng-value="h.id_judet"  ng-selected="h.id_judet=='<?php echo $land_address_data[0]['id_judet']; ?>'"  >
                                        {{h.judet}}
                                    </option>
                                </select>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">UAT</label>

                            <div class="col-sm-9" ng-controller="uat_superior" ng-app="uat_superior_module">
                                <select id="land_address_uat" class="form-control" name="land_address_uat">

                                    <option ng-repeat="h in rez"
                                            value="h.sirsup" <?php if ("h.sirsup" == $land_address_data[0]['sirsup']) {
                                        echo "selected=\"selected\"";
                                    } ?> ng-selected="h.sirsup==<?php echo $land_address_data[0]['sirsup']; ?>">
                                        {{h.localitate_superioara}}
                                    </option>


                                </select>
                            </div>


                    </form>
                </div>
            </section>
        </div>

And this is a part from script for angular:

var tip_judet = 'get_judet';
var address_judet = "cautare.php?tip=get_judet";
var app_judet = angular.module("land_address_judet_module", []);
app_judet.controller('land_address_judet_controller', function ($scope, $http) {
    $http.get(address_judet)
        .then(function (response) {
            $scope.rez = response.data.records;
        });
});

var tip3 = 'get_uat_superior';
var judet = $('#land_address_judet_id').val();

var address3 = "cautare.php?tip=" + tip3 + "&id_judet=" + judet;
var app3 = angular.module("uat_superior_module", []);
app3.controller('uat_superior', function ($scope, $http) {
    $http.get(address3)
        .then(function (response) {
            $scope.rez = response.data.records;
        });
            $scope.ChangeJudet = function () {
                alert('da');
                judet = $('#land_address_judet').val();
                var address = "cautare.php?tip=" + tip3 + "&id_judet=" + judet;
                $http.get(address)
                    .then(function (response) {
                        $scope.rez = response.data.records;
                    });
            }


});


angular.module("CombineModule", ["formular_land", "formular_land_address", "uat_superior_module", "land_address_judet_module"]);

From the code above, the first input is blank and when I change the data, it doesn't triggers the $scope.ChangeJudet

Thank you

Upvotes: 0

Views: 219

Answers (2)

georgeawg
georgeawg

Reputation: 48948

Don't use multiple ng-app directives.

<!-- ERRONEOUS -->

<div ng-app="land_address_judet_module" ng-controller="land_address_judet_controller">

<div class="col-sm-9" ng-controller="uat_superior" ng-app="uat_superior_module">

There are a few things to keep in mind when using ng-app:

  • only one AngularJS application can be auto-bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application.

— AngularJS ng-app Directive API Reference

Upvotes: 0

Bartosz Ociepka
Bartosz Ociepka

Reputation: 57

Your $scope.ChangeJudet function is in controller uat_superior and you are trying to access it while using land_address_judet_controller. You can try using $rootScope as it will be available to the entire application or just use the proper controller.

Upvotes: 1

Related Questions