JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl as editProject">
    <select class="form-control" ng-model="editProject.project" ng-options="project as project.type for project in editProject.options track by project.type"></select>
    <select class="list-group">
        <option class="list-group-item" ng-repeat="snack in editProject.snacks()" value="{{snack.val}}">{{snack.name}}</option>
    </select>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('DemoCtrl', function () {

    var editProject = this;
    
    editProject.project = {};

    editProject.options = [{
        'type': 'Fruits'
    }, {
        'type': 'Vegetables'
    }, {
        'type': 'Desserts'
    }];

    editProject.snacks = function () {
        if (editProject.project.type == 'Fruits') {
            return [{
            "name":"Grapes",
            "val":"gr"
            },
            {
            "name":"Oranges",
            "val":"or"
            },
            {
            "name":"Apples",
            "val":"ap"
            }
              ]
        }

        if (editProject.project.type == 'Vegetables') {
            return  [{
            "name":"potato",
            "val":"po"
            },
            {
            "name":"Brinjal",
            "val":"br"
            },
            {
            "name":"Tomato",
            "val":"to"
            }
              ]
        } else {
            return [
                'Cookies',
                'Cake',
                'Pie']
        }
    };
});