Wie erhalte ich ausgewählte Werte aus dem Drop-Down-Bereich in den Bereich, während ich die verschachtelte ng-Option verwende?

Question

Nach der Ansicht Code, den ich mehr wählen Dropdown

<div ng-controller="sourceController"> 
 
    <form novalidate ng-submit="submit()"> 
 
    <div class="row"> 
 
     <div class="addNewButton"> 
 
     <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Add New Data Source</button> 
 
     <div ng-include="'pages/modal.html'"></div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     Location: 
 
     <select id="location" ng-model="location" ng-options="city for (city, facilities) in sourceSelection " style="width: 100px"> 
 
      <option value=''>Select</option> 
 
     </select> 
 

 
     </div> 
 

 
     <div class="col-sm-3"> 
 
     Facility: 
 
     <select id="facility" ng-disabled="!location" ng-model="facility" ng-options="facility for (facility, phases) in location"> 
 
      <option value=''>Select</option> 
 
     </select> 
 

 
     </div> 
 

 
     <div class="col-sm-3"> 
 
     Phase : 
 
     <select id="phase" ng-disabled="!facility" ng-model="phase" ng-options="phase for phase in facility"> 
 
      <option value=''>Select</option> 
 
     </select> 
 

 
     </div> 
 

 
     <div class="col-sm-3"> 
 
     Device Type 
 
     <select id="deviceType" ng-disabled="!phase" ng-model="deviceType"> 
 
      <option value=''>Select</option> 
 
      <option ng-repeat="deviceType in deviceTypes" value="{{deviceType}}">{{deviceType}}</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 

 
    <input type="submit" id="submit" value="Submit" /> 
 

 
    </form> 
 
    <button onclick="myFunction()">click here</button> 
 
    selected choices : {{location}} , {{facility}}, 
 

 
</div>

und der Steuerung Ich verwende ist

app.controller('sourceController', function($scope, $http, $rootScope) { 
 
    $scope.sourceSelection = { 
 
    "Chennai": { 
 
     "siruseri": ["phase1", "phase2"], 
 
     "chennai one": ["phase1"] 
 
    }, 
 
    "kochi": { 
 
     "Kochi_technopark": ["phase1"] 
 
    } 
 
    }; 
 
});

aufzufüllen bin mit Jetzt möchte ich das ausgewählte Feld (i e. ausgewählten Ort, Einrichtung, Phase in Controller) mit $scope in Controller-Seite und Modell, das ich dort verwende gibt mir den Wert der ausgewählten Dropdown-Taste.

Answer 1

So folgenden zwei Zeilen sind die Antwort, ich habe von meinem colle hinzufügen

$scope.getSelectedLocation= function(){ 
     var temp = document.getElementById("location"); 
     var location = temp.options[temp.selectedIndex].value; 
     console.log(location); 
} ; 

Answer 2

Sie können den ausgewählten Wert in Ihrem Controller abrufen, da Sie ng-model = "FIELD" in Ihrer Auswahl verwenden.

So möchten, wenn Sie den Wert in Ihrem Controller erhalten Sie verwenden können:

$scope.FIELD // FIELD can be location, phase, facility, etc 

Diese Variable den Wert der ausgewählten Option wählen jeweils gespeichert werden.

Answer 3

Sie können ng-Änderungsereignis erhalten ausgewählten Ort als,

<select id="location" ng-change="getSelectedLocation()" ng-model="location" ng-options="city for (city, facilities) in sourceSelection " style="width: 100px"><option value=''>Select</option></select> 

In Ihrem Controller,

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

    $scope.getSelectedLocation = function() { 

     console.log($scope.location); 
    } 
});