AngularJS通过选择列表中显示的不同对象的属性

我有我建立Here这个AngularJS Web应用程序（只有主菜>面包有当前的项目）AngularJS通过选择列表中显示的不同对象的属性

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

当前我试图建立一个函数，将返回正确的价格取决于当前选择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; 
    } 

};

我在调用这个问题功能，即使我现在意识到它不可重用，因为它总是会返回面包棒价格s ...可能能够添加一个参数，以使其可重用。

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

来源

2015-06-20 SuperVeetz

用getPrice（）从它被定义成一个电脑板$范围

尝试，而不是像这样：

<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>

来源

2015-06-20 07:01:11

AngularJS通过选择列表中显示的不同对象的属性

相关问题