AngularJS使用多個選項來計算產品價格

Question

摘要：

用戶應該在表單環境中選擇他們想要的產品。每種產品都有核心價格和多種其他選項可供選擇時更改價格。

產品和選項都顯示在兩個選擇字段被越來越填充像這樣：

$scope.products = [ 
{ 
    name:'Product A', 
    cost:5, 
    options: [{name:"Option 1", value:10}] 
}, 

{ 
    name:'Product B', 
    cost:10, 
    options: [{name:"Option 1", value:10},{name:"Option 2", value:15}] 
} 
]; 

$scope.cart = { 
    items: [{    
     qty: 1, 
    }] 
}; 

和

<tr ng:repeat="item in cart.items"> 
    <td> 
    <div class="type-select"> 
     <select ng-model="item.product" ng-options="p.name for p in products"></select> 
    </div>  
    </td> 
    <td> 
    <div class="type-select"> 
     <select ng-model="item.option" ng-options="o for o in item.product.options.name" ng- disabled="!checked"> 
    </div>   
    </td>  
    <td> 
    <input ng:model="item.qty" value="1" size="4" ng:required="" ng:validate="integer" class="ng-pristine ng-valid ng-valid-required input-mini"> 
    </td> 
    <td> 
    {{calculate()}} 
    </td> 
</tr> 

1. 的選項中進行選擇保持爲空。爲什麼？
2. 我如何計算這種角度的方式？ （將有多個產品線可能）

Answer 1

<select ng-model="item.product" ng-options="p as p.name for p in products"> 
</select> 
... 
<select ng-model="item.option" ng-options="o as o.name for o in 
item.product.options" ng-disabled="!checked"></select> 
... 
<td> 
    {{calculate(item)}} 
</td> 

控制器：

$scope.calculate = function(item){ 
    /* return the calculated cost */   
} 

Answer 2

你可能會發現我的示例應用引號手勢一個很好的參考：https://github.com/JohnMunsch/airquotes

這是一個AngularJS應用程序，我寫的對於T恤衫網站而言，它演示了用戶可能會設置的一組不同的值，從而可以影響價格（例如較深的顏色，因爲需要使用更多的墨水而需要付費）絲網印刷他們和xxl襯衫有價格溢價）。

這聽起來像是你想要在這裏建立的那種東西。