angularProject/app/views/oneWeek.html

<!-- {{todayDay+$index+'/'+todayMonthYear}} -->
<div class="constructor-cart">
  <div class="slick-container">
    <slick slides-to-show=3 slides-to-scroll=1 infinite=false>
      <div ng-repeat=" item in arrDays track by $index">
        <div class="constructor-day">
            <h2 class="constructor-day__title accordion__title">{{item.caption}}</h2>
            <div class="constructor-day__type">
              <b class="constructor-day__type-title"> BREAKFAST </b>
              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].breakfast" jqyoui-droppable="{multiple:true}">
                <span ng-hide="hideMe( item.day, 'breakfast')" class='constructor-meals__btn-add'>ADD MEAL</span>
                <div class='constructor-meals__item' ng-repeat="item in order[item.day].breakfast track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone', animate: true}" ng-model="order[item.day].breakfast" jqyoui-draggable="{index: {{$index}},animate:true}">
                  <div class="constructor-meals__img">
                    <img ng-src="{{item.imageUrl}}">
                  </div>
                  <div class="constructor-meals__title">
                    <h3>{{item.mealName}}</h3>
                  </div>
                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'breakfast', $index)">
                    <span class="fa fa-times"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="constructor-day__type">
              <b class="constructor-day__type-title"> LUNCH </b>
              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].lunch" jqyoui-droppable="{multiple:true}">
                <span ng-hide="hideMe( item.day, 'lunch')" class='constructor-meals__btn-add'>ADD MEAL</span>
                <div class='constructor-meals__item' ng-repeat="item in order[item.day].lunch track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].lunch" jqyoui-draggable="{index: {{$index}},animate:true}">
                  <div class="constructor-meals__img">
                    <img ng-src="{{item.imageUrl}}">
                  </div>
                  <div class="constructor-meals__title">
                    <h3>{{item.mealName}}</h3>
                  </div>
                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'lunch', $index)">
                    <span class="fa fa-times"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="constructor-day__type">
              <b class="constructor-day__type-title">DINNER</b>
              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].dinner" jqyoui-droppable="{multiple:true}">
                <span ng-hide="hideMe( item.day, 'dinner')" class='constructor-meals__btn-add'>ADD MEAL</span>
                <div class='constructor-meals__item'  ng-repeat="item in order[item.day].dinner track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].dinner" jqyoui-draggable="{index: {{$index}},animate:true}">
                  <div class="constructor-meals__img">
                    <img ng-src="{{item.imageUrl}}">
                  </div>
                  <div class="constructor-meals__title">
                    <h3>{{item.mealName}}</h3>
                  </div>
                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'dinner', $index)">
                    <span class="fa fa-times"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="constructor-day__type">
              <b class="constructor-day__type-title">SNACKS</b>
              <div class="constructor-meals constructor-meals--border" data-drop="true" ng-model="order[item.day].snacks" jqyoui-droppable="{multiple:true}">
                <span ng-hide="hideMe( item.day, 'snacks')" class='constructor-meals__btn-add'>ADD MEAL</span>
                <div>
                  <div class='constructor-meals__item' ng-repeat="item in order[item.day].snacks track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].snacks" jqyoui-draggable="{index: {{$index}},animate:true}">
                    <div class="constructor-meals__img">
                      <img ng-src="{{item.imageUrl}}">
                    </div>
                    <div class="constructor-meals__title">
                      <h3>{{item.mealName}}</h3>
                    </div>
                    <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'snacks', $index)">
                      <span class="fa fa-times"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </slick>
  </div>
</div>