排序后将子部分添加到正确的父部分 - Angular JS

Question

我有一个示例代码，用户可以在其中添加一个部分，并且可以在该部分下添加一个子部分。节和小节是 sortable 使用 ui-sortable 但问题是当我对项目进行排序时，就像我将第 1 节交换到第 2 节然后尝试将新的子节添加到第 2 节，然后新元素是加到第1节是错的，应该加到第2节下

这是我的演示，但无法正常工作：Complete Code

我的问题是如何在对部分进行排序后将新的子部分添加到正确的父部分中。因为在对部分进行排序后，添加子部分不会执行正确的行为。子部分转到了错误的父部分。

我的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>

我的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});
   };
}]);

希望我解释清楚了。谢谢

Answer 1

$index 似乎不可靠，不知道为什么（但请参阅下文）。此问题的有效解决方案：

更改addSubSection()以获取父对象对象而不是索引：

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

从模板传递父级：

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

分叉的 plunk：https://plnkr.co/edit/BFR6JLngJiFztR5P6dWa?p=preview

重新排列小节时，内部可排序功能不起作用。我相信模型的表示方式，即所有子部分都在一个平面数组中，并且它们被安排到视图中的父级（即 ng-if），这会导致错误。我可能会更好地将小节拆分为每个部分的单独数组，例如使用 ng-repeat 的范围或将一个部分的子部分放入其模型中，例如$scope.section = [{id: 1, subSections: [...]}, {id:2, subSections: [...]}];.

排序后将子部分添加到正确的父部分 - Angular JS

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

javascript

jquery-ui-sortable

angularjs