Как показать значения выбора на основе другого выбора с использованием углового JS

Question

У меня есть список мест в поле выбора. При выборе местоположения соответствующие типы инцидентов должны отображаться в другом поле выбора.

$scope.locationNames=[ 
      {id:"Onboard",value:"On-board service"}, 
      {id:"Clubhouse",value:"Clubhouse"}, 
      {id:"Gate",value:"Gate"} 
    ]; 

    $scope.incidentTypesList={ 
      Onboard:[ 
        {id:"IFE faulty",value:"IFE faulty"}, 
        {id:"223",value:"No special meal as ordered"}, 
        {id:"Spoilt",value:"Spoilt/damaged belongings"} 
      ]; 

      Clubhouse:[ 
        {id:"",value"No appointments available"}, 
        {id:"",value="Late/delayed transport service"}, 
        {id:"",value="Facilities not available"} 
      ]; 
    }; 

Я могу получить имена мест в списке, используя приведенный ниже код.

<select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames"> 
<option value="">Select location</option> 
</select> 

Можете ли вы, пожалуйста, помочь мне реализовать при выборе на этом, чтобы показать значения в другом поле выбора.

Answer 1

Я думаю, что решение ниже соответствует вашим потребностям. В вашем массиве были некоторые синтаксические ошибки, которые необходимо было исправлять.

HTML

<div ng-app="myApp" ng-controller="myAppCtrl"> 
    <select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames"> 
     <option value="">Select location</option> 
    </select> 
    <select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]"> 
     <option value="">Select incident</option> 
    </select> 
</div> 

JS

var myApp = angular.module("myApp", []) 

myApp.controller("myAppCtrl", function($scope){ 
    $scope.locationNames=[ 
     {id:"Onboard",value:"On-board service"}, 
     {id:"Clubhouse",value:"Clubhouse"}, 
     {id:"Gate",value:"Gate"} 
    ]; 

    $scope.incidentTypesList={ 
     Onboard:[ 
      {id:"IFE faulty",value:"IFE faulty"}, 
      {id:"223",value:"No special meal as ordered"}, 
      {id:"Spoilt",value:"Spoilt/damaged belongings"} 
     ], 
     Clubhouse:[ 
      {id:"",value:"No appointments available"}, 
      {id:"",value:"Late/delayed transport service"}, 
      {id:"",value:"Facilities not available"} 
     ] 
    } 
}); 

JSFiddle: https://jsfiddle.net/ABr/wqy2ha9o/3/