2017-03-07 5 views
0

Ich bin neu in AngularJS, ich lerne jeden Tag. Aber für 2 Tage bin ich bei diesem ng-change Problem fest. Ich habe 2 Auswahl-Eingänge. Die zweite Eingabe enthält Werte basierend auf der ersten Eingabeoption. Ich habe ein solches Beispiel gemacht, aber jetzt funktioniert es nicht. Ich weiß nicht, ob ich ein Mähdrescher-Modul habe oder ob es von ng-selected ist. hier ist mein Code:AngularJS ng-change on wählen nicht triggern

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

Und das ist ein Teil von Skript für Winkel:

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

Aus dem obigen Code, der erste Eingang ist leer, und wenn ich die Daten ändern, nicht wahr löst die $ scope.ChangeJudet

Sie

Antwort

1

Ihre $scope.ChangeJudet Funktion in der Steuerung es uat_superior und Sie versuchen, den Zugriff auf danken, während mitist. Sie können versuchen, $rootScope zu verwenden, wie es für die gesamte Anwendung verfügbar sein wird, oder einfach den richtigen Controller verwenden.

0

Verwenden Sie nicht mehrere ng-app Anweisungen.

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

Es gibt ein paar Dinge im Auge zu behalten, wenn ng-app mit:

  • nur eine AngularJS Anwendung Auto-Bootstrap per HTML-Dokument sein kann. Der erste im Dokument gefundene Name ng-app wird verwendet, um das Root-Element für den automatischen Bootstrapping als Anwendung zu definieren.

— AngularJS ng-app Directive API Reference