var app = angular.module('app', ['ngMaterial']);
app.controller('SelectController', function ($scope) {
// Data extracted from KnockoutJs cart example
$scope.sampleProductCategories = [
{
"name": "Classic Cars",
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"options":[
{"value": "Color",
"options":[
{"value": "Red"},
{"value":"Black"}
],
},
{"value":"Seats",
"options":[
{"value": "Leather"},
{"value":"Cloth"}
],
},
{"value":"Warranty",
"options":[
{"value": "2 Year"},
{"value":"3 Year"}
],
}
],
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
}
]
},
{
"name": "Motorcycles",
"products": [
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
},
{
"name": "1957 Vespa GS150",
"price": 32.95
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32
}
]
},
{
"name": "Planes",
"products": [
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27
},
{
"name": "ATA: B757-300",
"price": 59.33
}
]
}
];
});
angular.bootstrap(document, ['app']);
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"/>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-controller="SelectController">
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Catgory</label>
<md-select ng-model="category">
<md-option ng-repeat="c in sampleProductCategories" ng-value="c">{{c.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>Product</label>
<md-select ng-model="categoryItem">
<md-option ng-repeat="p in category.products" ng-value="p">{{p.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>SubChild</label>
<md-select ng-model="subChild">
<md-option ng-repeat="o in categoryItem.options" ng-value="o">{{o.value}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>Level4</label>
<md-select ng-model="level4">
<md-option ng-repeat="o in subChild.options" ng-value="o">{{o.value}}</md-option>
</md-select>
</md-input-container>
</div>
<hr />
category={{category.name}}<br/>
product={{categoryItem.name}}<br/>
subChild={{subChild.value}}<br/>
level4={{level4.value}}<br/>
</div>