web-dev-qa-db-ja.com

Angular.js:既存のスコープデータに基づいてng-repeatsを再レンダリングすることは可能ですか?

ビューには、jQuery UI:Sortableディレクティブを使用して、リストアイテムのドラッグアンドドロップと並べ替えを容易にする、接続されたulリストがたくさんあります。

JQuery UIのドラッグアンドドロップで行った変更は、$scope関数を使用して$applyに適用しますが、この部分は機能します…

しかし、私が今直面している問題は、これらのリストのいくつかにドロップすると、ユーザーが入力する必要のあるカスタムフォームを提供することです。

ユーザーには次のオプションがあります。

  1. フォームに入力して続行すると、$apply呼び出しが実行され、データが$scopeに永続化されます。
  2. キャンセルボタンをクリックすると、情報を保存するために$applyを呼び出す代わりに、最後のドラッグアンドドロップ操作を効果的に元に戻して、すべてのリストを効果的に「再レンダリング」し、$scopeにまだあるデータを反映させる必要があります。この段階(最新のドラッグはまだ影響を与えていないため)。

この「キャンセル」ボタンの効果は、ユーザーがリストアイテムを選択して別のリストにドラッグする前のポイントに、すべてを効果的に戻すことです。

ng-repeatsの「更新」または「再レンダリング」を強制して、視覚的に更新し、現在の$scopeデータを再度表示するにはどうすればよいですか?

26
Jannis

ユーザーがフォームに記入し始めると、私は設定します

$scope.oldData = angular.copy($scope.data);

次に、ユーザーが好きなようにフォームを使用して$ scope.dataを編集できるようにします。

次に、ユーザーがキャンセルを押した場合は、$scope.data = $scope.oldDataを設定するだけです。

22
Andrew Joslin