Angular Drag And Drop Lists Between Nested Views Using The Same Model & Controller

Question

Overview:

I use the angular-drag-and-drop-lists directives to handle drag and drop between lists.

My api data source returns nested lists like so:

[
  {
    "day_date": "Apr 4, 2017",
    "day_events": [
      {
        "event_title": "Check in"
      },
      {
        "event_title": "zip up"
      }
    ]
  },
  {
    "day_date": "Apr 5, 2017",
    "day_events": [
      {
        "event_title": "An event on the second day",
      }
    ]
  }
];

I'm using ui-router's $stateProvider to separate these lists into nested views but using the same controller for all views. For example:

In the above image, we'll concern ourself with the first two views:

• The left side nav lists the days from the api (collection of items.)
• The middle nested view lists all the events in each day (the items)

The idea being that we allow the dragging and dropping of the following:

• reorder of days within the days list (collection if items)
• reorder of events within events list (items)
• moving of events from one day to another (items moved to new collection of items)

Once the reordering is done, we will then return the newly saved order to the api. I figure we need to share the controller between views so we let the views change the data on the same scope and then post the entire change back to the same api endpoint.


As a proof-of-concept, I spun up a plunker to see if I can get the moving of items between days to work.

http://plnkr.co/edit/cgQC60FMLwTkA9WPDiRr?p=preview

It works because I nested the ng-repeat for each list.

  <div ng-controller="daysCtrl">

<ul ng-repeat="day in days" dnd-list="day.day_events">
  <li class="title">{{day.day_date}}</li>

  <li ng-repeat="event in day.day_events" dnd-draggable="event" dnd-moved="day.day_events.splice($index, 1)" dnd-effect-allowed="move">
    {{ event.event_title }}</li>
</ul>

The problem:

As mentioned, my api data is nested, so I need to reorder it and post it back to the same endpoint. Since I have separate nested views/states that deal with each part of the nested list, the approach in the previous plunker breaks down because I can't nest the ng-repeat between views.

In the example below, I don't have nested states but I did separate out the ng-repeats. Obviously, it won't work.

http://plnkr.co/edit/EfgR07hJOlLTw60n2RVQ?p=preview

Things I've tried:

I saw this but it's not the same as they are using two separate lists on the scope. I have a single nested list that's shared between views.

When a user clicks on a day in the list of days view, I could pass the array of events to the new view via the state parameters. I've done this and it works. However, it's then treated as a new list and, while I can rearrange the events within their own list, I can't move the event items between days.

What I'd like to know:

• What's the best way to accomplish this without changing my data structure or my views?
• Is there a better way than the way I'm currently doing it? How would you do this? (even if it means changing the api or view setup - which would suck but i'm open to it.)

Thank you

Answer 1

Create a new list $scope.list and copy the days_events in that list whenever the day_date is clicked. Iterate through this list in another view which is under same controller and your drag drop shall work http://plnkr.co/edit/vsuuULgnaXvk7y9C0MOJ?p=preview