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 回答