如何在重新排序後將項目添加到嵌套的角度用戶界面樹列表中？

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> 

有了，你通過你的「天」的對象你的功能，所以在這個對象的任何變化都會反映到您的html：

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