JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<span ng-app="Categories">
<span ng-controller="MainCtrl">
	<select ng-model="categoryng" ng-options="category.id as category.name for category in categories">
	    <option ng-disabled="false"  ng-selected="true" value="">Category</option>
	</select>
	<select ng-model="subCategoryng" ng-options="subCategory.id as subCategory.name for subCategory in subCategories | filter:{category:categoryng}">
	    <option ng-disabled="false"  ng-selected="true" value="">Subcategory</option>
	</select>
        <select ng-model="subSubCategoryng" ng-options="subSubCategory.name for subSubCategory in subSubCategories | filter:{subCategory:subCategoryng}">
	    <option ng-disabled="false"  ng-selected="true" value="">Subsubcategory</option>
	</select>
</span>
</span>

JavaScript

var app = angular.module('Categories', []);
app.controller('MainCtrl', function($scope) {
     $scope.categories = [{"id":"1","name":"Accomodation"},{"id":"2","name":"Corporations"},{"id":"3","name":"Urbanism"},{"id":"4","name":"Life"},{"id":"5","name":"Food & Drink"}];
    $scope.subCategories = [{"id":"1","name":"Elevator","category":"1,"},{"id":"28","name":"Room","category":"1,"},{"id":"29","name":"Oda Servisi","category":"1,"},{"id":"30","name":"P\u00fcfl\u00fc Objeler","category":"1,2,3,4,5,"},{"id":"31","name":"Referans S\u00f6zler","category":"1,2,3,4,5,"},{"id":"32","name":"Resepsiyon","category":"1,"},{"id":"33","name":"Sa\u011fl\u0131k Kulub\u00fc","category":"1,"},{"id":"34","name":"Sosyal Sorumluluk","category":"1,2,3,4,5,"},{"id":"35","name":"Tan\u0131t\u0131m \/ Reklam","category":"1,2,3,"},{"id":"36","name":"Teknoloji","category":"1,2,3,4,5,"},{"id":"37","name":"Tuvaletler","category":"1,2,3,5,"},{"id":"38","name":"Ula\u015f\u0131m","category":"1,2,4,5,"},{"id":"39","name":"Vale","category":"1,2,5,"},{"id":"40","name":"Yarat\u0131c\u0131 Objeler","category":"1,2,3,4,5,"},{"id":"41","name":"Yemek Sunumu","category":"1,5,"},{"id":"42","name":"Bekleme Odas\u0131","category":"2,"},{"id":"44","name":"\u00c7al\u0131\u015fanlar\u0131n Aileler","category":"2,"},{"id":"45","name":"\u00c7evre","category":"2,3,"},{"id":"46","name":"\u00c7i\u00e7ek\u00e7i","category":"2,"},{"id":"47","name":"Dekorasyon","category":"2,"},{"id":"48","name":"Dinlenme Odas\u0131","category":"2,"},{"id":"49","name":"Engelli Vatanda\u015flar","category":"2,3,"},{"id":"51","name":"G\u00f6zl\u00fck\u00e7\u00fc","category":"2,"},{"id":"52","name":"\u0130lkokul","category":"2,"},{"id":"57","name":"Kuaf\u00f6r","category":"2,3,"},{"id":"58","name":"Lise","category":"2,"},{"id":"59","name":"Lokantalar","category":"2,"},{"id":"60","name":"M\u00fc\u015fteri...