Question

我有一个AngularJS Web App我正在构建Here（只有主菜＆gt;面包棒当前有项目）

一切都很好，直到我决定允许用户选择不同大小的项目（大，中或小）。这个任务对我来说很头疼，因为现在我需要跟踪每种尺寸的不同价格，不同尺寸和不同数量的订单。

目前我正在尝试构建一个函数，该函数将返回正确的价格，具体取决于当前选择的select option。

以下是我们正在使用的breadsticks对象：

$scope.breadsticks = [
  {
    name: 'Garlic Buttered',
    priceSM: 2.99,
    priceMD: 3.99,
    priceLG: 4.99,
    sizeSM: '6pcs',
    sizeMD: '10pcs',
    sizeLG: '14pcs',
    description: 'Garlic buttery goodness on a stick of cheesy bread.',
    numOrderSM: 0,
    numOrderMD: 0,
    numOrderLG: 0,
  },
  {
    name: 'Mozzarella Stuffed',
    priceSM: 3.49,
    priceMD: 4.49,
    priceLG: 5.49,
    sizeSM: '6pcs',
    sizeMD: '10pcs',
    sizeLG: '14pcs',
    description: 'Jam packed with that mozarella goodness that we know you love.',
    numOrderSM: 0,
    numOrderMD: 0,
    numOrderLG: 0,
  }
];

标记

    <tbody ng-repeat="breadstick in breadsticks">
      <tr>
        <td>
          <select id="sizeSelect">
            <option>Choose Size</option>
            <option value="1">Small - {{breadstick.sizeSM}}</option>
            <option value="2">Medium - {{breadstick.sizeMD}}</option>
            <option>Large - {{breadstick.sizeLG}}</option>
          </select>
        </td>
        <td>
          {{breadstick.name}}
        </td>
        <td>
          <script>
            getPrice();
          </script>
        </td>

这是我的尝试：

$scope.getPrice = function() {

  var selectList = document.getElementById("sizeSelect");

  var selectSize = selectList.options[selectList.selectedIndex].value;

  if(selectSize == 1) {
    return breadstick.priceSM;
  } else if(selectSize == 2) {
    return breadstick.priceMD;
  }  

};

我在调用此函数时遇到问题，即使我现在意识到它不可重用，因为它总会返回面包棒价格......可能能够以某种方式添加参数以使其可重用。

错误为getPrice() is undefined，因为它在范围内，但$scope.getPrice();也未定义。我需要根据选择的选项打印到屏幕上的不同值。

Answer 1

尝试改为：

<tbody ng-repeat="breadstick in breadsticks">
      <tr>
        <td>
          <select id="sizeSelect">
            <option>Choose Size</option>
            <option value="1">Small - {{breadstick.sizeSM}}</option>
            <option value="2">Medium - {{breadstick.sizeMD}}</option>
            <option>Large - {{breadstick.sizeLG}}</option>
          </select>
        </td>
        <td>
          {{breadstick.name}}
        </td>
        <td>
          {{getPrice();}}
                  </td>

Answer 2

他们试图解决你的问题的方式不是有角度的方式。尝试使用ng-options而不是选择。然后将所有价格绑定到它。并使用ng-model获取所选值：

  <table>
    <tbody ng-repeat="breadstick in breadsticks">
  <tr>
    <td>
      <select ng-model="breadstick.selectedItem" ng-options="item.title for item in [{title:'Small - ' + breadstick.priceSM, price:breadstick.priceSM}, {title:'Medium - ' + breadstick.priceMD, price:breadstick.priceMD}, {title: 'Large - ' + breadstick.priceLG, price:breadstick.priceLG}] track by item.price">
      </select>
    </td>
    <td>
      {{breadstick.name}}
    </td>
      <td>{{breadstick.selectedItem}}</td>
</tr>
  </tbody>
  </table>

我已经使用angular更好地更改了代码工作。从select中选择一个项目后，新属性将添加到作为所选项目的每个面包棒对象中。所以breadstick.selectedItem.price为您提供该面包棒的选定价格。

这是小提琴手：https://jsfiddle.net/alisabzevari/fpqtdsh6/3/

您必须使用角度1.2 +

AngularJS通过选择列表

2 个答案: