중첩 된 ng-option을 사용하는 동안 드롭 다운에서 범위로 선택된 값을 가져 오는 방법은 무엇입니까?

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

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

Answer 2

컨트롤러에서 ng-model = "FIELD"를 사용하고 있기 때문에 컨트롤러에서 선택한 값을 검색 할 수 있습니다. 이 변수는 각 선택의 선택된 옵션의 값을 저장합니다

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

:

그래서 당신은 당신이 사용할 수있는 컨트롤러의 값을 얻으려면. 당신은 같은 선택한 위치를 얻기 위해 NG 변경 이벤트를 추가 할 수 있습니다

Answer 3

, 컨트롤러에서

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

, 그래서 대답, 난 내 colleauge에서 가져온 두 개의 선 다음

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

    $scope.getSelectedLocation = function() { 

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