Geek Answers Handbook

Angularjs sortable items and categories based on json data

I have this json structure:

{ "items":[ { "category":"Category 1", "name":"01", "id":"46701a72410c" }, { "category":"Category 2", "name":"02", "id":"9a18ffe9f148" }, { "category":"Category 2", "name":"03", "id":"de3a49a458cc" }, { "category":"Category 3", "name":"04", "id":"bb06b1eec9c8" }, { "category":"Category 3", "name":"05", "id":"92973f4cfbfc" }, { "category":"Category 3", "name":"06", "id":"b06bbb86d278" } ], "categories":[ { "isCollapsed":false, "name":"Category 1" }, { "isCollapsed":false, "name":"Category 2" }, { "isCollapsed":false, "name":"Category 3" } ] }

and I'm trying to add sorting using angularjs ui.sortable. I want both categories and items to be sorted.

I created two nested ordered lists based on this json, but I have no idea how to solve the sortable settings. Is this possible for this json structure?

With these settings, I decided to use only category sorting. The problem is when the elements move (wrong positions or undefined are accepted).

 $scope.sortableOptionsCategories = { stop: function(ev, ui) { console.log("Category moved."); } }; $scope.sortableOptionsItems = { connectWith: '.items-container', start: function(e, ui) { $(this).attr('data-previndex', ui.item.index()); console.log("Start: from position " + ui.item.index()); }, update: function(e, ui) { var newIndex = ui.item.index(); var oldIndex = $(this).attr('data-previndex'); $(this).removeAttr('data-previndex'); console.log("Update: " + oldIndex + " -> " + newIndex); }, stop: function(ev, ui) { console.log("Item moved."); } };

UPDATE: Here is my code: http://codepen.io/anon/pen/LpGmeY The solution that keeps json as it is is perfect for me, but if that is not possible, I will accept any other solution.

+5
source share
2 answers

Have you tried this library - https://github.com/angular-ui-tree/angular-ui-tree

I created jsfiddle - http://jsfiddle.net/450fk7wp/5/ - which handles nested, sortable, drag and drop items.

You will need to convert the JSON so that it looks like this:

 $scope.rows = [{ "name":"Category 1", "columns": [ { "category":"Category 1", "name":"01", "id":"46701a72410c" } ], }, { "name":"Category 2", "columns": [ { "category":"Category 2", "name":"02", "id":"9a18ffe9f148" }, { "category":"Category 2", "name":"03", "id":"de3a49a458cc" } ], }, { "name":"Category 3", "columns": [ { "category":"Category 3", "name":"04", "id":"bb06b1eec9c8" }, { "category":"Category 3", "name":"05", "id":"92973f4cfbfc" }, { "category":"Category 3", "name":"06", "id":"b06bbb86d278" } ] }];

Just not quite sure what type of sorting you are looking for.

Hope this helps!

+1
source

If I understand correctly that you have nested lists, are you using nested ng repeats?

If this seems like you cannot do it with sorting (from https://github.com/angular-ui/ui-sortable )

  • ng-model is required, so the directive knows which model to Update. Element
  • ui-sortable should contain only one ng-repeat, and not any other elements (above or below).

Can you embed your HTML?

+1
source

More articles:


All Articles