AngularJS 设置默认 SELECT 值答案

【问题标题】：AngularJS Setting default SELECT valuesAngularJS 设置默认 SELECT 值
【发布时间】：2013-11-30 17:02:07
【问题描述】：

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

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

如何设置购物车商品的默认值？

【问题讨论】：

How can i set default value for the cart items 你的意思是防止它们在开始时为空吗？

标签： angularjs

【解决方案1】：

您可以监视项目。

添加项目后，您应该将该项目的产品指定为第一个产品。类似的东西：

$scope.$watchCollection('cart.items', function(newValue, oldValue){
   var changedItem = newValue[newValue.length-1];
   changedItem.product = $scope.products[0];
});

当然，这是假设您知道 $scope.products 是一个数组并且它不为空。您可以对此进行一些检查。无论如何，我认为为此设置默认值很奇怪，但有一种方法适合您。

【讨论】：