Question

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

以下是我的演示，但无法正常使用：Complete Code

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

我的HTML

ui-sortable

我的JS

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

希望我能清楚地解释清楚。谢谢

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>

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

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

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

1 个答案: