JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<div ng-app='app' ng-controller='CarChoiceCtrl'>
    <h2>Auswahl</h2>
    <select ng-model='manufacturer' ng-options='m for m in manufacturers' ng-change='loadModels()'>
        <option value=''></option>
    </select>
    
    <select ng-model='model' ng-options='m for m in models' ng-change='loadSerialNumbers();'>
        <option value=''></option>
    </select>
    
    <select ng-model='serialNumber' ng-options='s for s in serialNumbers'>
        <option value=''></option>
    </select>
    
    <hr>

    <h2>Ausgabe</h2>
    <ul>
        <li>{{manufacturer}}</li>
        <li>{{model}}</li>
        <li>{{serialNumber}}</li>
    </ul>
</div>

CSS

h2{
    font-weight: bold;
}

div{
    padding: 1em;
}

select{
    display: block;
    width: 200px;
}

JavaScript

/**
 * @author lottikarotti
 */
var app = angular.module('app', []);

/**
 * Provides informations about manufacturers and models.
 */
app.factory('CarApi', [
    function(){
        return{
            /**
             * Simply returns all known manufacturers.
             *
             * @return {Array}
             */
            findManufacturers: function(){
                return ['Audi', 'BMW', 'Volkswagen'];
            },
            
            /**
             * Search for models by a given manufacturer.
             *
             * @return {Array}
             */
            findModels: function(manufacturer){
                return{
                    'Audi':['A3', 'A5', 'R8'],
                    'BMW':['350d', 'M6', 'X6'],
                    'Volkswagen':['CC', 'Golf', 'Touareg']
                }[manufacturer];
            },
            
            /**
             * Generates some random serial numbers.
             *
             * @return {Array}
             */
            findSerialNumbers: function(manufacturer, model){
                return[
                    [manufacturer, model, '- 1'].join(' '),
                    [manufacturer, model, '- 2'].join(' '),
                    [manufacturer, model, '- 3'].join(' ')
                ];                
            }
        };
    }
]);

/**
 * Awake that UI.
 */
app.controller('CarChoiceCtrl', [
    '$scope',
    'CarApi',
    function($scope, carApi){
        angular.extend($scope, {
            /**
             * @type {Array}
             */
            manufacturers: carApi.findManufacturers(),
            
            /**
             * @return {void}
             */
            loadModels: function(){
                this.resetModel();
                this.resetSerialNumber();
                this.models = carApi.findModels(this.manufacturer);
            },
            
            /**
             * @return {void}
             */
            loadSerialNumbers: function(){
  ...