如何使用嵌套的ng選項從下拉菜單中將選定值轉換爲範圍？

Question

以下是我使用的填充多個選擇下拉

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

而且我使用的控制器將視圖代碼

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

現在我想綁定選定的字段（即即選定的位置，設施，階段在控制器）與$scope在控制器端和我正在使用的模型給我的選定下拉鍵的值。

Answer 1

所以，下面兩行的答案，我從我的colleauge了

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

Answer 2

由於您在select中使用了ng-model =「FIELD」，因此您可以檢索控制器中的選定值。

所以，如果你想在你的控制器中的值可以使用：

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

這個變量將存儲的每個選擇所選選項的值。

Answer 3

您可以添加NG-change事件以獲得選定位置的，

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

在你的控制器，

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

    $scope.getSelectedLocation = function() { 

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