javascript - 对对象数组中的对象使用 ng-options

Question

我这里有这个对象数组:

$scope.breadsticks = [
  {
    name: 'Garlic Buttered',
    price: { priceSM: 3.99, priceMD: 4.99, priceLG: 5.99 },
    size: { sizeSM: '6 pcs', sizeMD: '10 pcs', priceLG: '14 pcs' },
    description: 'Garlic buttery goodness on a stick of cheesy bread.',
  },
  {
    name: 'Mozzarella Stuffed',
    price: { priceSM: 4.49, priceMD: 5.49, priceLG: 6.49 },
    size: { sizeSM: '6 pcs', sizeMD: '10 pcs', priceLG: '14 pcs' },
    description: 'Jam packed with that mozzarella gucci we know you love.',
  }
];

我想创建一个仅显示 size: { sizeSM: '6 pcs', sizeMD: '10 pcs', PriceLG: '14 pcs' } 信息的选择列表:

<td>
  <select ng-model="breadstick.selectedItem" ng-options="breadstick.size for breadstick in breadsticks">
  </select>
</td>

<td>
  {{breadstick.selectedItem.price}}
</td>

我还希望当选择列表发生变化时显示相应的价格。

任何帮助或碰撞到正确的方向将不胜感激。

Fiddle Here

Answer 1

使用ngRepeat对象语法:

<td>
    <select ng-model="breadstick.selectedItem" ng-options="size as text for (size, text) in breadstick.size">
    </select>
</td>

演示:https://jsfiddle.net/vn2ppwp9/1/

编辑:如果您想获取所选商品尺寸的价格，重新格式化数据会更容易，如下所示:

$scope.breadsticks = [
{
  name: 'Garlic Buttered',
  price: [
      {
          size: "small",
          price: 3.99
      }, {
          size: "medium",
          price: 4.99
      }, {
          size: "large",
          price: 5.99 
      }
  ],
  size: [{
      size: "small",
      text: '6 pcs'
  }, {
      size: "medium",
      text: '10 pcs', 
  }, {
      size: "large",   
      text: '14 pcs' 
  }],
  description: 'Garlic buttery goodness on a stick of cheesy bread.',
},
{
  name: 'Mozzarella Stuffed',
  price: [
      {
          size: "small",
          price: 4.49
      }, {
          size: "medium",
          price: 5.49
      }, {
          size: "large",
          price: 6.49 
      }
  ],
  size: [{
      size: "small",
      text: '6 pcs'
  }, {
      size: "medium",
      text: '10 pcs', 
  }, {
      size: "large",   
      text: '14 pcs' 
  }],
  description: 'Jam packed with that mozzarella gucci we know you love.',
}
];

现在您可以将 View 重复更新为:

<select ng-change="getPrice(breadstick, breadstick.selectedItem.size)" ng-model="breadstick.selectedItem.size" ng-options="size.size as size.text for size in breadstick.size">
</select>

其中getPrice函数:

$scope.getPrice = function(breadstick, size) {
    for (var i = 0; i < breadstick.price.length; i++) {
        if (breadstick.price[i].size == size) {
            breadstick.selectedItem.price =  breadstick.price[i].price;
            break;
        }
    }
}