4

ui.sortable を使用して、並べ替え可能なアイテムのリストを表示しています。次のようにデータを取得します。

    context.rules.getAll()
        .then(
            function (data) { // success
                $scope.rules = data;
                cachedRules = data.slice();
                $scope.loaded = true;
            },
            function (response) { // failure
                console.log(response);
            });

cachedRules並べ替えられている配列を元の配列と比較し、変更が加えられたかどうかを検出できるように使用します。私の見解は次のようになります。

    <tbody ui-sortable="sortableOptions" ng-model="rules">
        <tr ng-repeat="rule in rules|orderBy:'RuleSequence'" ng-class="{'unsortable': !reorder, 'inactive': !rule.Active}">
            <td><i ng-show="reorder" class="fa fa-reorder"></i></td>
            <td>{{rule.RuleSequence}}</td>
            <td>{{rule.ProxyType}}</td>
            <td>{{rule.ProxyDesc}}</td>
            <td>
                <i class="fa fa-download" title="Download CSV" ng-click="getAssignments(rule.RuleID)"></i>
                <i class="fa fa-gears" title="Edit Rule" ng-click="editRuleShow(rule)"></i>
            </td>
        </tr>
    </tbody>

何かが再注文されるたびに、このコードが呼び出されてRuleSequence(OrderBy で使用しているもの) が更新されます。

            $scope.rules.map(function (r) {
                r.RuleSequence = $scope.rules.indexOf(r) + 1;
                return r;
            });

そして、 の順序$scope.rulesが異なる場合、「保存」ボタンが有効になりますcachedRules。これはすべて完璧に機能します。

ただし、クリックするとページの表示が元の順序に戻る「キャンセル」ボタンが必要です。元のデータのコピーを保存している場合、これは簡単なはずですが、ng-clickを使用して実行します$scope.rules = cachedRules.slice();が、それを行った後、ページの順序は更新されず、元の状態に$scope.rules戻っても変更された状態のままです変わらない状態。ディスプレイを元の順序に戻すにはどうすればよいですか?

4

1 に答える 1

4

さらに調べてみると、.slice()私が思っていたようにディープコピーを実行していないように見えます (javascript の経験が浅いため)。したがって、最初にデータを取得して cachedData を設定したとき、配列自体は参照ではありませんでしたが、配列内のオブジェクトは参照のままだったので、ここでそれらを更新したとき

            $scope.rules.map(function (r) {
                r.RuleSequence = $scope.rules.indexOf(r) + 1;
                return r;
            });

両方を更新していたため、cachedRules には更新された RuleSequence が含まれます。「キャンセル」をクリックして cachedRules に戻すとRuleSequence、同じままになります。したがって、loDashで適切なディープコピーを行うと

    context.rules.getAll()
        .then(
            function (data) { // success
                $scope.rules = data;
                cachedRules = _.cloneDeep($scope.rules);
                $scope.loaded = true;
            },
            function (response) { // failure
                console.log(response);
            });

すべてが滞りなく進みました。

于 2014-12-05T19:43:38.433 に答える