AngularJS:根据选择框中选择的选项获取其他信息

时间:2015-01-10 14:43:01

标签: javascript json angularjs

我是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/

提前致谢!

0 个答案:

没有答案