angularProject/app/views/select-menu-page.html

<div class="select-menu-page" ng-controller="SelectMenuPageController">
  <div class="search">
    <div class="search-wrapper">
      <div class="search-description">
        explore the master kitchen menu:
      </div>
      <div class="search-buttons-wrapper">
        <div class="search-button" ng-click="mealType = 'breakfast'" ng-class="{'search-button-active': mealType == 'breakfast'}">
          Breakfast
        </div>
        <div class="search-button" ng-click="mealType = 'lunch'" ng-class="{'search-button-active': mealType == 'lunch'}">
          Lunch
        </div>
        <div class="search-button" ng-click="mealType = 'dinner'" ng-class="{'search-button-active': mealType == 'dinner'}">
          Dinner
        </div>
        <div class="search-button" ng-click="mealType = 'snacks'" ng-class="{'search-button-active': mealType == 'snacks'}">
          Snacks
        </div>
      </div>
    </div>
  </div>
  <div class="meal-items" ng-if="mealType == 'breakfast'">
    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'breakfast'">
      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
        <span class="fa fa-times"></span>
      </div>
      <div class="meal-item-title">
        <h2>{{meal.mealName}}</h2>
      </div>
      <div class="meal-item-img">
        <img ng-src="{{meal.imageUrl}}">
      </div>
      <div class="meal-item-ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
        </ul>
      </div>
      <div class="meal-item-bottom">
        <div class="meal-item-bottom-container">
          <div class="meal-item-price">
            <span>{{meal.price}} USD</span>
          </div>
          <div class="meal-item-btn">
            <button type="button" ng-click="selectMeal($index)">Add</button>
          </div>
        </div>
      </div>
      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
        <i class="fa fa-check-circle"></i>
      </div>
    </div>
  </div>
  <div class="meal-items"  ng-if="mealType == 'lunch'">
    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'lunch'">
      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
        <span class="fa fa-times"></span>
      </div>
      <div class="meal-item-title">
        <h2>{{meal.mealName}}</h2>
      </div>
      <div class="meal-item-img">
        <img ng-src="{{meal.imageUrl}}">
      </div>
      <div class="meal-item-ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
        </ul>
      </div>
      <div class="meal-item-bottom">
        <div class="meal-item-bottom-container">
          <div class="meal-item-price">
            <span>{{meal.price}} USD</span>
          </div>
          <div class="meal-item-btn">
            <button type="button" ng-click="selectMeal($index)">Add</button>
          </div>
        </div>
      </div>
      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
        <i class="fa fa-check-circle"></i>
      </div>
    </div>
  </div>
  <div class="meal-items"  ng-if="mealType == 'dinner'">
    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'dinner'">
      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
        <span class="fa fa-times"></span>
      </div>
      <div class="meal-item-title">
        <h2>{{meal.mealName}}</h2>
      </div>
      <div class="meal-item-img">
        <img ng-src="{{meal.imageUrl}}">
      </div>
      <div class="meal-item-ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
        </ul>
      </div>
      <div class="meal-item-bottom">
        <div class="meal-item-bottom-container">
          <div class="meal-item-price">
            <span>{{meal.price}} USD</span>
          </div>
          <div class="meal-item-btn">
            <button type="button" ng-click="selectMeal($index)">Add</button>
          </div>
        </div>
      </div>
      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
        <i class="fa fa-check-circle"></i>
      </div>
    </div>
  </div>
  <div class="meal-items"  ng-if="mealType == 'snacks'">
    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'snacks'">
      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
        <span class="fa fa-times"></span>
      </div>
      <div class="meal-item-title">
        <h2>{{meal.mealName}}</h2>
      </div>
      <div class="meal-item-img">
        <img ng-src="{{meal.imageUrl}}">
      </div>
      <div class="meal-item-ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
        </ul>
      </div>
      <div class="meal-item-bottom">
        <div class="meal-item-bottom-container">
          <div class="meal-item-price">
            <span>{{meal.price}} USD</span>
          </div>
          <div class="meal-item-btn">
            <button type="button" ng-click="selectMeal($index)">Add</button>
          </div>
        </div>
      </div>
      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
        <i class="fa fa-check-circle"></i>
      </div>
    </div>
  </div>
</div>
<footer></footer>