jamcoder jamcoder - 6 months ago 24
AngularJS Question

Adding the sub section to correct parent section after sorting - Angular JS

I have a sample code where user can add a section and under the section they can add a sub section. The section and subsections are

sortable
using
ui-sortable
but the problem is when I sort the items, like I swap the Section 1 to Section 2 then try to add new sub section to Section 2, then new element is added to Section 1 which is wrong, the item should be added under the Section 2.

Here is my the demo but not working properly: Complete Code

My question is how can add new sub-section into the correct parent section after I sort the sections. Because after sorting the sections, the adding of sub section doesn't do the correct behavior. The sub section goes to the wrong parent section.

My HTML

<ul ui-sortable="sortableOptions" ng-model="section" class="list">
<li ng-repeat="parent in section">
<span>Section {{parent.id}}</span>
<ul ui-sortable="sortableOptions" ng-model="subSection" class="list">
<ol ng-repeat="child in subSection" ng-if="child.parentId == parent.id">
<span>SubSection {{child.id}}</span>
</ol>
<button ng-click="addSubSection($index + 1)">Add SubSection</button>
</ul>
</li>
</ul>

<button ng-click="addSection()">Add Section</button>


My JS

var myApp = angular.module('myApp',['ui.sortable'])

.controller('MyCtrl', ['$scope', function($scope) {
$scope.section = [{id: 1}, {id:2}];
$scope.subSection = [{id:1, parentId: 1}, {id:2, parentId: 1}, {id:3, parentId: 2}];

$scope.addSection =function(){
var newId = $scope.section.length +1;

$scope.section.push({id: newId});
};

$scope.addSubSection = function(parentIndex) {
var newSubId = $scope.subSection.length + 1;
$scope.subSection.push({id:newSubId, parentId:parentIndex});
};
}]);


Hope I explained it clearly. Thank you

Answer

The $index seems unreliable, not sure why (but see below). A working solution for this problem:

  1. Change addSubSection() to take the parent object instead of the index:

    $scope.addSubSection = function(parent) {
        var newSubId = $scope.subSection.length + 1;
        $scope.subSection.push({id:newSubId, parentId:parent.id});
    };
    
  2. Pass the parent from the template:

    <button ng-click="addSubSection(parent)">Add SubSection</button>
    

A forked plunk: https://plnkr.co/edit/BFR6JLngJiFztR5P6dWa?p=preview


The inner sortable is not working when re-arranging subsections. I believe that the way the model is represented, i.e. all subsections are in a flat array and they are arranged to a parent in the view (i.e. the ng-if), is leading to bugs. I would probably be better to split the subsections to a separate array per section, e.g. using the scope of the ng-repeat or placing the subsections of a section in its model, e.g. $scope.section = [{id: 1, subSections: [...]}, {id:2, subSections: [...]}];.

Comments