Angular: Empty Fiddle
http://angularjs.org/
HTML
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.18/angular-0.9.18.js"></script>
Item1:
<select name="items[0].category" ng:options="c.title for c in categories"></select>
Item2:
<select name="items[1].category" ng:options="c[c].title for c in categories"></select>
JavaScript
function Main() {
this.categories = [
[0] {id: 'cat1', title: 'Category1'},
[1]{id: 'cat2', title: 'Category2'},
[2]{id: 'cat3', title: 'Category3'}
];
this.items = [{
id: 1,
name: 'Item 1',
// does not work - different object with same content
category: {
id: 'cat1',
title: 'Category1'
}
}, {
id: 2,
name: 'Item 2',
// works fine - reference to object
category: this.categories[0]
}];
// HERE IS THE MAGIC :-D
// create a map to save searching
var catMap = {};
angular.forEach(this.categories, function(c) {
catMap[c.id] = c;
});
// set the references
angular.forEach(this.items, function(item) {
item.category = catMap[item.category.id];
});
}