Karim Ali Karim Ali - 4 months ago 8
Javascript Question

I can populate ServiceType but can't get the right values for ServiceName(dependent drop down list)

How can I have the right ServiceName dropdown values based on ServiceType dropdown selected values.



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





for example, if I load the first object then the value "In-Person" should be selected in the first dropdown and the value "Community Functional Assessment" should be selected in the second dropdown along with the corresponding list values and if I change first dropdown then the corresponding list values should be populated in the second dropdown.

Answer

Your data is structured in a way that does not make this the easiest, but it still isn't the worst:

Working Plnkr

Basically you need to find out which object in the ServiceTypeAndName array you are matching on. This requires a filter:

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

Here's the thing: I don't know how you plan on loading your selected items, the ones you store in the selectedLines array. I load the items via a select box in that plnkr.

When the top box is changed, it matches the remaining two.

enter image description here