AngularJS使用多个选择选项计算产品价格答案

【问题标题】：AngularJS Calculating product prices with multiple select optionsAngularJS使用多个选择选项计算产品价格
【发布时间】：2013-12-13 02:46:04
【问题描述】：

总结：

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

产品和选项显示在两个 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>

~~选项选择保持空白。为什么？~~
如何以角度方式计算？（可能会有多个产品线）

【问题讨论】：

标签： forms angularjs select

【解决方案1】：

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

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

听起来它非常适合您在这里尝试构建的那种东西。

【讨论】：

酷，非常感谢，一定会签出！

【解决方案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 */        
}

【讨论】：