I'm using ui.sortable to display a reorderable list of items. I get my data like this:
context.rules.getAll()
.then(
function (data) { // success
$scope.rules = data;
cachedRules = data.slice();
$scope.loaded = true;
},
function (response) { // failure
console.log(response);
});
I use cachedRules
so I can compare the array that is being reordered to the original and detect if a change has been made or not. My view looks like this:
<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>
Whenever something is reordered, this code gets called so that RuleSequence
(what I'm using in my OrderBy) is updated:
$scope.rules.map(function (r) {
r.RuleSequence = $scope.rules.indexOf(r) + 1;
return r;
});
And then a "Save" button becomes enabled if the order of $scope.rules
is different from cachedRules
. This all works perfectly.
However, I want to have a "Cancel" button that when clicked will revert the display on the page to the original order. Given that I store a copy of the original data this should be easy, I use ng-click to do $scope.rules = cachedRules.slice();
, however the order isn't updated on the page after I do that, is stays in it's changed state even though $scope.rules
is back to it's unchanged state. How can I get the display to revert back to its original order?
$scope.rules = cachedRules.slice();
I did$timeout(function () { $scope.rules = []; $scope.rules = cachedRules.slice(); }, 500);
No change however.