2

のようなアイテムのネストされたリストがありますDay > Exercises > Sets。
それぞれが複数dayを持つことができexercises、それぞれが複数exerciseを持つことができますsets。
各リストにはaddボタンがあります。

angular-ui-tree を使用して並べ替えるまで、すべてがうまく機能します。

最初のエクササイズを 2 番目のエクササイズと入れ替えてから+ setボタンをクリックすると、新しいセット位置は正しくありません。

これがcodepenです。同じ日の 2 つのエクササイズを入れ替えてから、8 つ目のエクササイズに属する を
クリックしてみてください。+ 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 -->
4

1 に答える 1

2

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({});
};
于 2015-09-24T15:10:34.770 に答える