JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="MainCtrl">
<h2>Select a screen</h2>
<select ng-model="selectedScreen" ng-options="screen as screen.name for screen in screens.screens"></select>
<hr />
<h2>Select a section</h2>
<select ng-model="selectedSection" ng-options="section as section.name for section in getSections(selectedScreen)"></select>
<hr />
<h2>Select section item</h2>
<select ng-model="selectedSectionItem" ng-options="item as item.id for item in getSectionItems(selectedScreen, selectedSection)"></select>
<hr />
<h2>Selected</h2>
Screen:
<pre>{{ selectedScreen | json}}</pre>
<br />
Sections:
<pre>{{ getSections (selectedScreen) | json }}</pre>
</div>
JavaScript
var sectGlobal = {
screens: [{
id: 0,
name: 'Screen0',
sections: [{
id: 0,
name: "foo",
sectionItems: []
}, {
id: 1,
name: "bar",
sectionItems: []
}, {
id: 2,
name: "bas",
sectionItems: []
}]
}, {
id: 1,
name: 'Screen1',
sections: [{
id: 0,
name: "fop",
sectionItems: []
}, {
id: 1,
name: "bau",
sectionItems: []
}, {
id: 2,
name: "bav",
sectionItems: []
}]
}, {
id: 2,
name: 'Screen2',
sections: [{
id: 0,
name: "dsfa",
sectionItems: []
}, {
id: 1,
name: "test",
sectionItems: []
}, {
id: 2,
name: "asdfae",
sectionItems: []
}]
}]
};
var app = angular.module("app", []);
app.controller("MainCtrl", ["$scope", function($scope){
$scope.screens = sectGlobal;
$scope.selectedScreen = $scope.screens.screens[0];
$scope.selectedSection;
$scope.selectedSectionItem;
$scope.getSections = function(screen) {
if(!screen) return null;
var index = $scope.screens.screens.indexOf(screen);
return $scope.screens.screens[index].sections;
}
$scope.getSectionItems = function(screen, section) {
if(!screen || !section) return null;
var screenIndex = $scope.screens.screens.indexOf(screen);
var sectionIndex = $scope.screens.screens[screenIndex].indexOf(section);
return $scope.screens.screens[screenIndex].sections[sectionIndex].sectionItems;
}
}]);