Javascript 在排序后将子节添加到正确的父节-Angular JS_Javascript_Angularjs_Jquery Ui Sortable

Javascript 在排序后将子节添加到正确的父节-Angular JS

javascript angularjs

Javascript 在排序后将子节添加到正确的父节-Angular JS,javascript,angularjs,jquery-ui-sortable,Javascript,Angularjs,Jquery Ui Sortable,我有一个示例代码，用户可以在其中添加一个部分，并在该部分下添加一个子部分。节和子节可以使用ui sortable进行排序，但问题是当我对项目进行排序时，比如我将节1交换到节2，然后尝试将新的子节添加到节2，然后将新元素添加到节1，这是错误的，项目应添加到节2下以下是我的演示，但无法正常工作：我的问题是，在我对节进行排序后，如何将新的子节添加到正确的父节中。因为在对节进行排序之后，添加子节并不能实现正确的行为。子节转到错误的父节我的HTML <ul ui-sortable="sorta

我有一个示例代码，用户可以在其中添加一个部分，并在该部分下添加一个子部分。节和子节可以使用

ui sortable

进行排序，但问题是当我对项目进行排序时，比如我将节1交换到节2，然后尝试将新的子节添加到节2，然后将新元素添加到节1，这是错误的，项目应添加到节2下

以下是我的演示，但无法正常工作：

我的问题是，在我对节进行排序后，如何将新的子节添加到正确的父节中。因为在对节进行排序之后，添加子节并不能实现正确的行为。子节转到错误的父节

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

希望我解释清楚。谢谢

这个

$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>

添加小节

叉形的砰砰声：

重新排列子节时，内部排序表不工作。我认为模型的表示方式，即所有子部分都在平面阵列中，并且它们被安排到视图中的父级（即

ng if

），会导致错误。我可能会更好地将子节拆分为每个节的单独数组，例如，使用

ng repeat

的作用域或将节的子节放置在其模型中，例如

$scope.section=[{id:1，subsections:[…]}，{id:2，subsections:[…]}]

索引

$index

似乎不可靠，不确定原因（请参见下文）。此问题的有效解决方案：

更改

addSubSection（）