javascript - 我可以填充 ServiceType，但无法获取 ServiceName 的正确值(相关下拉列表)

Question

如何根据 ServiceType 下拉列表选择的值获得正确的 ServiceName 下拉值。

$scope.ServiceTypeAndName = [    
    { 
      "id":0,
      "type":"",
      "list":""
    },
     { 
      "id":1,
      "type":"In-Person",
      "list":["ADL Functional Assessment", "Community Functional Assessment", "Future Care Cost Analysis"]
    },
     { 
      "id":2,
      "type":"Paper Review",
      "list":["OT - In Home Assessment - ABI", "OT - In Home Assessment Attendant Care with Form 1", "OT - Occupational Therapy Assessment"]
          
    },
     { 
      "id":3,
      "type":"Administration",
      "list":["Situational Assessment", "Situational Assessment (OT) - Day 1", "Situational Assessment (OT) - Day 2", "Construction Cost Consulting"]
    }  
];


$scope.selectedLine = [{"Event_ID": "100", "Service_Type": "In-Person", "Service_Name": "Community Functional Assessment"}, {"Event_ID": "101", "Service_Type": "Paper Review", "Service_Name": "OT - Occupational Therapy Assessment"},{"Event_ID": "102", "Service_Type": "In-Person", "Service_Name": "Future Care Cost Analysis"}];

<select ng-model="selectedLine.Service_Type" name="ServiceType" class="form-control">
   <option ng-repeat="temp in ServiceTypeAndName" value="{{temp.type}}">{{temp.type}}</option>
</select>
										
<select ng-model="selectedLine.Service_Name" name="ServiceName" ng-required="selectedLine.Service_Type!=''" class="form-control"> 
  
</select>

例如，如果我加载第一个对象，则应在第一个下拉列表中选择值“In-Person”，并应在第二个下拉列表中选择值“社区功能评估”以及相应的列表值，并且如果我更改第一个下拉列表，然后应在第二个下拉列表中填充相应的列表值。

Answer 1

您的数据的结构方式并不是最简单的，但它仍然不是最糟糕的:

Working Plnkr

基本上，您需要找出您匹配的 ServiceTypeAndName 数组中的哪个对象。这需要一个过滤器:

$scope.selectedLineChanged = function () {                  
   $scope.SelectedServiceTypeAndName = $filter('filter')($scope.ServiceTypeAndName, $scope.selectedLine.Service_Type)[0];           
};  

事情是这样的:我不知道您打算如何加载所选项目，即存储在 selectedLines 数组中的项目。我通过该 plnkr 中的选择框加载项目。

当顶部框更改时，它与其余两个框匹配。