How to show values of a select based on another select using angular JS

Question

I have list of locations in a select box. On selection of a location, the corresponding incidenttypes should be displayed in another select box.

$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"}
            ];
    };

I am able to get location names in the list using the below code.

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

Can you please help me how to implement on selection on this to show the values in another select box.

ArBro · Accepted Answer · 2015-08-10 07:06:07Z

4

I think the solution below fits your needs. There were some syntax errors in your array which needed to be fixed.

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/

edited Aug 10, 2015 at 7:06

answered Aug 7, 2015 at 11:37

ArBro

7316 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Navaneet Over a year ago

ng-click="getIncidentList(location)" is not required.

Anand Yerrapati Over a year ago

Thanks ABr. It solved my problem. Some times these minor mistakes kill the whole day. :)

Collectives™ on Stack Overflow

How to show values of a select based on another select using angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related