JSFiddle - React, Tailwind, and code Playground

by alisabzevari

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <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>
    </div>
</div>

JavaScript

function TodoCtrl($scope) {
    $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,
  }
];
}