CODEWITHSUNDEEP
javascriptangularjs
SuperVeetz
SuperVeetz

Reputation: 2136

AngularJS display different object property via select list

I have this AngularJS Web App that i'm building Here (Only the Entrees > Breadsticks have items currently)

Everything was fine, until I decided that I wanted to allow the user to select different size items (either large, medium or small). This task has been a headache for me because now I need to keep track of different prices, different sizes, and different number of orders for each size.

Currently i'm trying to build a function that will return the correct price depending depending on which select option is currently selected.

Here is my breadsticks object that we're working with: 

$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,
  }
];

Markup

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

Here is my attempt:

$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;
  }  

};

I'm having problems calling this function, even though I realize now that it is not reusable because it will always return breadstick prices... May be able to add a parameter somehow to make it reusable.

The error is getPrice() is undefined since it is in scope, but $scope.getPrice(); is also undefined. I need to print to the screen a different value depending which select option is chosen.

Upvotes: 0

Views: 124

Answers (2)

alisabzevari
alisabzevari

Reputation: 8146

They way you try to solve your problem is not the angular way. Try using ng-options instead of a select. then bind all prices to it. And use a ng-model to get the selected value:

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

I have changed your code work better with angular. After you select an item from your select, a new property will be added to each breadstick object that is your selected item. so breadstick.selectedItem.price gives you the selected price of that breadstick.

Here is the fiddler: https://jsfiddle.net/alisabzevari/fpqtdsh6/3/

You must use angular 1.2+

Upvotes: 1

Shubham Nigam
Shubham Nigam

Reputation: 3944

try instead something like:

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

Upvotes: 1

Related Questions