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>

~~选项选择保持为空。为什么？~~

~~我如何计算角度方式？（可能有多行产品）~~

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

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

2 个答案: