重新排序后如何将项目添加到嵌套的angular-ui-树列表？

Question

我有一个嵌套的项目列表，类似于 Day > Exercises > Sets。
每个 day 可以有很多 exercises，每个 exercise 可以有很多 sets。
每个列表都有一个 add 按钮。

一切正常，直到您使用 angular-ui-tree 重新排序。

如果您将第一个练习与第二个练习交换，然后单击 + set 按钮，则新设置的位置不正确。

这是 codepen。
尝试交换同一天的 2 个练习，然后单击属于其中八个练习的 + set。

我知道问题是由 ng-init 指令中设置的变量引起的，但我找不到任何解决方案。

谢谢。

<ul ng-model="program.days" ui-tree-nodes>
  <li ng-repeat="day in program.days" ng-init="dayIndex = $index" ui-tree-node>
    <div class="day">{{ day.name }}</div>

    <!-- Exercises -->
    <ul ng-model="day.exercises" ui-tree-nodes>
      <li ng-repeat="ex in day.exercises" ng-init="exIndex = $index" ui-tree-node>
        <div>{{ ex.name }}</div>

        <!-- Sets -->
        <ul ng-model="ex.sets" ui-tree-nodes>
          <li ng-repeat="set in ex.sets" ui-tree-node>
            <div>{{ set.reps }} reps</div>
          </li>
          <li><button ng-click="addSet(dayIndex, exIndex)">+ set</button></li>
        </ul>
        <!-- end Sets -->

      </li>
      <li><button ng-click="addExercise(dayIndex)">+ exercise</button></li>
    </ul>
    <!-- end Exercises -->

  </li>
  <li><button ng-click="addDay()">+ day</button></li>
</ul>
<!-- end Days -->

Answer 1

Ng-init 不适合你做的事情。使用嵌套数组时，尽量传递对象而不是索引，这样可以保持代码整洁。

这是示例：

<ul>
    <li ng-repeat="day in program.days">
        <div class="day">{{ day.name }}</div>
        <ul>
            <li ng-repeat="ex in day.exercises">
                <div class="ex">{{ ex.name }}</div>
            </li>
        </ul>
    </li>
    <li><button ng-click="addExercice(day)">+ set</button></li>
</ul>

这样您就可以将 "day" 对象传递给您的函数，因此此对象中的任何更改都将反映您的 html:

$scope.addExercice = function(day) {
    day.exercices.push({});
};

重新排序后如何将项目添加到嵌套的angular-ui-树列表？

How to add items to nested angular-ui-tree list after reorder?

javascript

angularjs

ng-repeat

angular-ui-tree