JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app='select' data-ng-controller='AppController'>
    <select
        data-ng-model='category'
        data-ng-options='c.label for c in categories'
    >
        <option value=''>-</option>
    </select>
    
    <select
        data-ng-model='item'
        data-ng-options='i for i in category.items'
        data-ng-disabled='!category'
    >
        <option value=''>-</option>
    </select>
    
    <p data-ng-show='category && item'>
        Auswahl: {{category.label}}, {{item}}
    </p>
</div>

CSS

select{
    width: 100%;
}

select[disabled]{
    opacity: .5;
}

JavaScript

/**
 * @author lottikarotti
 */
var app = angular.module('select', []);
app.controller('AppController', [
    '$scope',
    function($scope){
        $scope.categories = [
            {
                label: 'Obst',
                items: [
                    'Apfel',
                    'Banane',
                    'Birne'
                ]
            },
            {
                label: 'Gemüse',
                items: [
                    'Gurke',
                    'Paprika',
                    'Tomate'
                ]
            }
        ];
    }
]);