Wert von Umfang undefiniert mit ng-Modell in Controller

Question

Ich benutze eine Dropdown-Liste, auf der, wenn ich Landwirte auswähle, würde es entsprechende Eingabefelder zeigen und wenn ich Kunden wähle, würde es entsprechende Eingabefelder zeigen. Nach dem Auswählen des Wertes aus dem Dropdown-Menü und dem Klicken auf die Schaltfläche versuche ich, auf den Wert des Eingabefeldes im Controller zuzugreifen. Aber es wird undefiniert.

<div class="container admin-advanced-search-window-container"> 
    <div class = "col-md-4 form-group dropdown"> 
     <label style="margin-left: 14rem">Search</label> 
     <select style="margin-left: 20rem;margin-top: -4rem;" kendo-drop-down-list = "typeSelectionList" required ng-model = "type" > 
     <option oi-options selected = "true" value = "Farmers">Farmers</option> 
      <option oi-options value = "Products">Products</option> 
      <option oi-options value = "Customers">Customers</option> 
      <option oi-options value = "Trips">Trips</option> 
     </select> 
    </div> 
</div> 

<div id = "Customers" ng-if= "type == 'Customers'"> 
<div class="container admin-advanced-search-window-container"> 

    <div class="col-sm-5"> 
     <input style="width: 24rem" type="text" name="firstName" ng-model="firstName" class="form-control" placeholder="First Name" 
       title="First Name" /> 
    </div> 
    <div class="col-sm-5"> 
     <input style="width: 24rem" type="text" name="lastName" ng-model="lastName" class="form-control" placeholder="Last Name" 
       title="Last Name" /> 
    </div> 

</div> 
<div class="container admin-advanced-search-window-container"> 

    <div class="col-sm-5"> 
     <input style="width: 24rem" type="text" name="city" ng-model="city" class="form-control" placeholder="City" 
       title="City" /> 
    </div> 
    <div class="col-sm-5"> 
     <input style="width: 24rem" type="text" name="zipcode" ng-model="zipcode" class="form-control" placeholder="Zip Code" 
       title="Zip Code" /> 
    </div> 
</div> 

<div class="col-sm-3"> 
</div> 
<div class="col-sm-3"> 
    <button class="advanced-search-button btn btn-primary" type="button" >Search</button> 
</div> 

<div id = "Farmers" ng-if = "type == 'Farmers'"> 
    <div class="container admin-advanced-search-window-container"> 

     <div class="col-sm-5"> 
      <input style="width: 24rem" type="text" name="firstName" ng-model="farmerfirstName" class="form-control" placeholder="First Name" 
        title="First Name" /> 
     </div> 
     <div class="col-sm-5"> 
      <input style="width: 24rem" type="text" name="lastName" ng-model="lastName" class="form-control" placeholder="Last Name" 
        title="Last Name" /> 
     </div> 

    </div> 
    <div class="container admin-advanced-search-window-container"> 

     <div class="col-sm-5"> 
      <input style="width: 24rem" type="text" name="city" ng-model="city" class="form-control" placeholder="City" 
        title="City" /> 
     </div> 
     <div class="col-sm-5"> 
      <input style="width: 24rem" type="text" name="zipcode" ng-model="zipcode" class="form-control" placeholder="Zip Code" 
        title="Zip Code" /> 
     </div> 
    </div> 

    <div class="col-sm-3"> 
    </div> 
    <div class="col-sm-3"> 
     <button class="advanced-search-button btn btn-primary" type="button" ng-click = "advanacedSearchFarmers()">Search</button> 
    </div> 

</div> 

Dies ist Code meines Controller.

$scope.advanacedSearchFarmers = function(){ 
    var name = $scope.farmerfirstName; 
    alert(name); 
    var info = { 
     "firstName" : $scope.firstName, 
    "lastName" : $scope.lastName, 
    "city" : $scope.city, 
    "zipcode" : $scope.zipcode 
    }; 
    alert("IN ad"); 
    var promise = AdminService.getFarmersByAdvancedSearch(info); 
    promise.then(function(result){ 

    },function(err){ 
     alert("Error -"+err); 
    }); 
} 

Wenn ich versuche, Bauer aus Drop-down-und wählen Sie den Vornamen, es gibt mir undefined. Kann mir jemand helfen. Ich bin neu in eckigen. Dank

Answer 1

ng-if erzeugt und zerstört temporäre lokale Bereiche (siehe reference)

Als Test Sie könnten versuchen, Ihre ng-if-ng-show und seht uns ändern, wenn das Verhalten korrekt ist. In diesem Fall sollten Sie Ihren Code umgestalten, um Probleme mit Unterbereichen zu vermeiden. Setzen Sie einfach alle Ihre Eingabevariablen in ein Objekt.

Grundsätzlich verwandeln nur Situationen wie diese

$scope.myInput 

<input ng-if="..." ng-model="myInput" /> 

In so etwas wie diese Auf diese Weise

$scope.Inputs = {}; 
$scope.Inputs.myInput; 

<input ng-if="..." ng-model="Inputs.myInput" /> 

die neu ng-if erstellt Controller für ein bereits bestehendes Inputs Objekt in übergeordneten Bereichen suchen versuchen.

Answer 2

Angenommen, dass bei Auswahl einer bestimmten Option der jeweilige div-Abschnitt sichtbar ist.

Nur ein kleiner Zeiger. In Kunde & Farmer div, ist die Eigenschaft des ersten Namens an unterschiedliche Gültigkeitsbereichsvariable gebunden.

ng-model="farmerfirstName" (farmer block) 
    ng-model="firstName" (customer block) 

Daher $ scope.firstName wird nicht definiert, wenn Bauer Block ausgewählt ist.