4

次の表を検討してください。

 <tbody data-ng-repeat="job in jobs">
    <tr>
        <td>{{job.fileName}}</td>  
        <td>
            <button class="btn" ng-click="deleteJob($index);"><i class="icon-delete"></i>&nbsp; delete</button>
        </td>
    </tr>
</tbody>

ジョブを削除すると、行 ID が関数に渡され、正常に機能します。

 scope.deleteJob = function (id) {
                scope.jobs.splice(id, 1);
            }

ただし、次に変更deleteJob($index)してdeleteJob({{$index}})も、インデックスは引き続き関数に渡されますが、行 1 を削除すると、行 2 のインデックスは 2 のままで更新されません。

どうして ?2 つのアプローチの違いは何ですか?

4

2 に答える 2

5

これは、使用する場合$indexは変数ですが、使用する場合{{$index}}は変数の代わりに使用されるためです。

DOM を確認すると、最初case($index)はまだ$indexDOM に表示されていることがわかりますが、使用{{$index}}すると DOM に 0,1,2... が表示されます。

を使用する{{index}}と、配列が変更されたときに DOM にはまだdeleteJob(0),deleteJob(2)... などがあります-削除されたインデックスがありません。

$indexDOMを使用する場合$index、実際の現在のインデックスを表す変数である があります。

于 2013-10-14T12:25:26.303 に答える
1

{{$index}}繰り返される要素の反復子オフセットの間違ったアプローチと有効な使用法は である必要があると思います$index

$indexイテレータであり、削除後に項目の 1 つをそれぞれ更新する必要があります。

手段を書くとき{{$index}}- イテレータに格納されている現在の値を表示します。

他の言語と同様に、たとえば Java では、リスト ( などng-repeat) をループで実行する場合、インデックスの問題を防ぐためにイテレータを使用してアイテムを削除することしかできません。

デモFiddle

于 2013-10-14T12:25:53.040 に答える