Angular 1.0rc2: Chained Selects
http://angularjs.org/
by zdam
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc2.js"></script>
<div ng-controller="MyCtrl">
<select ng:model="category" ng:options="c.name for c in sampleProductCategories" ></select>
<select ng:model="categoryItem" ng:options="p.name for p in category.products" ></select>
<hr />
category={{category.name}}<br />
product={{categoryItem.name}}
price = {{categoryItem.price}}
<br/>
foo={{category}}
</div>
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.category = {};
$scope.categoryItem = {};
// Data taken from KnockoutJs cart example
$scope.sampleProductCategories = [
{
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
}
],
"name": "Classic Cars"
},
{
"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": "Motorcycles"
},
{
"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
}
],
"name": "Planes"
}
];
}