I have implemented an angular table that is organized by an array. The structure is such that the second level depends on the first level, and the third level depends on the second, and so forth.
For instance:
A is the parent of B, B is the parent of C.
The ordering works perfectly until the point where I want to reverse it. At that stage, I only want the last child (in the above example, C) to be reordered, while both A and B remain unchanged.
Is this achievable? If yes, how can I do it?
In the plunker link provided below, I aim to change the order of the rows with C when clicking the button.
http://plnkr.co/edit/bCwdIg3MNHVdfaX1hvni?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Example - example-example105-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>
<button ng-click="toggle_order()">switch order</button>
<span class="sortorder" ng-show="predicate === 'group'" ng-class="{reverse:reverse}"></span>
</th>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.group}}</td>
</tr>
</table>
</div>
</body>
</html>
JavaScript:
(function(angular) {
'use strict';
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.friends = [{
group: ['A']
}, {
group: ['A', 'B1']
}, {
group: ['A', 'B1', 'C1']
}, {
group: ['A', 'B1', 'C2']
}, {
group: ['A', 'B1', 'C3']
}, ];
$scope.predicate = 'group'
$scope.reverse = false;
$scope.toggle_order = function() {
$scope.reverse = !$scope.reverse;
};
}]);
})(window.angular);