基本的"购物车"场景。用户应该在表单环境中选择他们想要的产品。每种产品都有一个核心价格和多个附加选项,这些选项在选择时会更改价格。
产品和选项显示在两个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>
如何设置购物车项目的默认值?
您可以监视物品。
添加项目后,应将该项目的产品分配为第一个产品。类似的东西:
$scope.$watchCollection('cart.items', function(newValue, oldValue){
var changedItem = newValue[newValue.length-1];
changedItem.product = $scope.products[0];
});
当然,这是假设您知道$scope.products是一个数组,并且它不是空的。你可以为此开一些支票。无论如何,我认为有默认值是很奇怪的,但有一种方法适合你。