angularjs - 对底层数组进行更改时，ng-repeat 不会重新排序

Question

我正在使用 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 仍保持更改状态又回到了不变的状态。我怎样才能让显示器恢复到原来的顺序？

Answer 1

再看下去，好像是.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);
            });

一切顺利。