我是AngularJS初学者。
问题:我有一个由JSON构建的选择框。当我选择一个选项时,我可以显示所选项目。但另外,我想显示其他信息。
我的JSON看起来像这样
[
{ id : 1, name : "Notebooks", "products" : [
{ id : 101, name : "Lenovo 123", "price" : 1299.9, "additionals" :
[ { id : 10001, name : "4GB RAM", "price": 100 },
{ id : 10002, name : "128GB SSD", "price" : 120 },
{ id : 10003, name : "120GB SSD", "price" : 120 },
{ id : 10004, name : "512GB SSD", "price" : 410 },
{ id : 10005, name : "External HDD", "price" : 80 }
]
},
{ id : 102, name : "Asus 456", "price" : 1699.9, "additionals" :
[ { id : 20001, name : "4GB RAM", "price": 100 },
{ id : 20002, name : "256GB SSD", "price" : 140 },
{ id : 20003, name : "i7 CPU", "price" : 150 },
{ id : 20004, name : "512GB SSD", "price" : 440 },
{ id : 20005, name : "Windows 8.1", "price" : 100 }
]
},
{ id : 103, name : "Macbook Pro", "price" : 1949.0, "additionals" :
[ { id : 30001, name : "USB device", "price": 60 },
{ id : 30002, name : "External HDD", "price" : 80 },
{ id : 30003, name : "4GB RAM", "price" : 140 },
{ id : 30004, name : "512GB SSD", "price" : 300 },
{ id : 30005, name : "Mouse", "price" : 50 }
]
}
]
},
{
id : 2, name : "TVs", "products" : [
{ id : 501, name : "Samsung TV 1", "price": 959.9 },
{ id : 502, name : "Sony TV 2", "price": 1409.9 },
{ id : 503, name : "Philips TV 3", "price": 1899.9 }
]
}
];
我的选择框就像这样
<select id="product-selector" data-ng-model="product">
<option value="0"></option>
<optgroup data-ng-repeat="s in stock" label="{{ s.name }}">
<option data-ng-repeat="p in s.products"
value="{{ p.id }}">{{ p.name }}</option>
</optgroup>
</select>
无论我选择什么,我想看到更多的信息,如价格,名称,额外信息等。
我如何在AngularJS中执行此操作?可能这很容易,但我想我走错了路。
我尝试过多种解决方案,但都没有。我为上次尝试创造了一个小提琴:http://jsfiddle.net/kxx5a2ez/
提前致谢!