JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <select data-ng-model="firstSelect" data-ng-options="option.id as option.name for option in parentOptionObjs"></select>
    <select data-ng-model="secondSelect" data-ng-options="option.name for option in childOptionObjs | secondDropdown: firstSelect"></select>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.parentOptionObjs = [{
        id: 1,
        name: 'option 1',
        desc: ''
    }, {
        id: 2,
        name: 'option 2',
        desc: ''
    }];

    $scope.childOptionObjs = [{
        parent: 1,
        id: 9,
        name: 'option 11',
        desc: ''
    }, {
        parent: 1,
        id: 10,
        name: 'option 12',
        desc: ''
    }, {
        parent: 1,
        id: 11,
        name: 'option 13',
        desc: ''
    }, {
        parent: 2,
        id: 12,
        name: 'option 14',
        desc: ''
    }, {
        parent: 2,
        id: 13,
        name: 'option 15',
        desc: ''
    }];
});

app.filter('secondDropdown', function () {
    return function (secondSelect, firstSelect) {
        var filtered = [];
        if (firstSelect === null) {
            return filtered;
        }
        angular.forEach(secondSelect, function (s2) {
            if (s2.parent == firstSelect) {
                filtered.push(s2);
            }
        });
        return filtered;
    };
});