Comment obtenir les valeurs sélectionnées dans la portée à partir du menu déroulant en utilisant ng-option imbriquée?

Question

Voici le code de vue que je utilise pour remplir plusieurs menu déroulant, sélectionnez

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

Et le contrôleur j'utilise est

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

Maintenant, je veux lier le champ sélectionné (i e. emplacement sélectionné, installation, phase dans le contrôleur) avec $scope dans le côté du contrôleur et le modèle que j'utilise, il me donne la valeur de la clé déroulante sélectionnée.

Answer 1

Donc deux lignes suivantes sont la réponse, je me suis de mon colleauge

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

Answer 2

Vous pouvez récupérer la valeur sélectionnée dans votre contrôleur car vous utilisez ng-model = "FIELD" dans votre sélection.

Donc, si vous voulez obtenir la valeur de votre contrôleur, vous pouvez utiliser:

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

Cette variable stocke la valeur de l'option sélectionnée de chaque sélection.

Answer 3

Vous pouvez ajouter un événement ng changement pour obtenir l'emplacement choisi comme,

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

Dans votre contrôleur,

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

    $scope.getSelectedLocation = function() { 

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