AngularJS通过多种选择选项计算产品价格

Question

摘要：

用户应该在表单环境中选择他们想要的产品。每种产品都有一个核心价格和多个附加选项，这些选项在选择时会更改价格。

产品和选项显示在两个SELECT字段中，填充如下：

$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

您可能会发现我的示例应用程序airquotes是一个很好的参考：https://github.com/JohnMunsch/airquotes

这是我为一个t恤网站编写的AngularJS应用程序，它演示了在给定用户可能设置的一组影响价格的不同值的情况下动态生成报价（例如，较深的颜色会产生附加费，因为丝网印刷时必须使用更多的墨水，而xxl衬衫的价格更高）。

这听起来很适合你在这里建造的那种东西。

Answer 2

<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 */        
}