angularProject/app/views/add-item-page.html

<div class="add-item-page" ng-controller="AddItemPageController">
  <div class="form-wrapper">
    <div class="form-tabs">
      <div class="form-tab1" ng-class="{'form-tab-active': isFirstTab}" ng-click="isFirstTab = true">
        Add custom menu item
      </div>
      <div class="form-tab2" ng-class="{'form-tab-active': !isFirstTab}" ng-click="isFirstTab = false">
        Add ready menu item
      </div>
    </div>
    <form ng-if="isFirstTab" ng-submit='sendMeal()'>
      <label for="meal-name"><h2>Enter the name of the meal:</h2></label>
      <input type="text" id="meal-name" ng-model="resObj.mealName">
      <h2>Enter ingredients:</h2>
      <div class="ingredient-wrapper"  ng-repeat="ingredient in resObj.ingredients track by $index">
        <input type="text" ng-model="resObj.ingredients[$index]">
        <span ng-click="deleteIngredient($index)" class="fa fa-times"></span>
      </div>
      <button type="button" ng-click="addIngredient()">Add ingredient</button>
      <input type="text" placeholder="image url" ng-model="resObj.imageUrl">
      <select ng-model="resObj.type">
        <option value="" disabled selected>Select meal type</option>
        <option value="breakfast">Breakfast</option>
        <option value="lunch">Lunch</option>
        <option value="dinner">Dinner</option>
        <option value="snacks">Snacks</option>
      </select>
      <input type="text" ng-model="resObj.weight" placeholder="weight">
      <input type="text" ng-model="resObj.price" placeholder="price">
      <button type="submit">Send</button>
    </form>
    <form ng-if="!isFirstTab" ng-submit='sendDiet()'>
      <label for="title"><h2>Enter the title:</h2></label>
      <input type="text" id="meal-name" ng-model="resObj2.title">
      <label for="description"><h2>Enter the description:</h2></label>
      <textarea id="description" ng-model="resObj2.description"></textarea>
      <select ng-model="resObj2.dietType">
        <option value="" disabled selected>Select diet type</option>
        <option value="loss">Weight loss</option>
        <option value="gain">Weight gain</option>
        <option value="balance">Balanced diet</option>
      </select>
      <input type="text" placeholder="image url" ng-model="resObj2.imageUrl">
      <input type="text" placeholder="price" ng-model="resObj2.price">
      <input type="text" ng-model="resObj2.calories" placeholder="calories">
      <input type="text" ng-model="resObj2.protein" placeholder="protein">
      <input type="text" ng-model="resObj2.fats" placeholder="fats">
      <input type="text" ng-model="resObj2.carbs" placeholder="carbs">
      <button type="submit">Send</button>
    </form>
  </div>
</div>
<footer></footer>