treecontrol attributes to control ordering (order-by & reverse-order)

README.md

@@ -118,6 +118,8 @@ Attributes of angular treecontrol
     - `labelSelected` : inhect classes into the div element around the label only when the node is selected
 - `on-selection` : function to call on the current `$scope` on node selection.
 - `selected-node` : parameter on the `$scope` to update with the current selection.
+- `order-by` : value for ng-repeat to use for ording sibling nodes
+- `reverse-order` : whether or not to reverse the ordering of sibling nodes based on the value of `order-by`
 
 ### The tree labels
 

angular-tree-control.js

@@ -31,7 +31,9 @@
                     treeModel: "=",
                     selectedNode: "=?",
                     onSelection: "&",
-                    options: "=?"
+                    options: "=?",
+                    orderBy: "@",
+                    reverseOrder: "@"
                 },
                 controller: function( $scope ) {
 
@@ -111,7 +113,7 @@
                     //tree template
                     var template =
                         '<ul '+classIfDefined($scope.options.injectClasses.ul, true)+'>' +
-                            '<li ng-repeat="node in node.' + $scope.options.nodeChildren+'" ng-class="headClass(node)" '+classIfDefined($scope.options.injectClasses.li, true)+'>' +
+                            '<li ng-repeat="node in node.' + $scope.options.nodeChildren + ' | orderBy:orderBy:reverseOrder" ng-class="headClass(node)" '+classIfDefined($scope.options.injectClasses.li, true)+'>' +
                             '<i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)"></i>' +
                             '<i class="tree-leaf-head '+classIfDefined($scope.options.injectClasses.iLeaf, false)+'"></i>' +
                             '<div class="tree-label '+classIfDefined($scope.options.injectClasses.label, false)+'" ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude></div>' +

test/angular-tree-control.js

@@ -108,6 +108,25 @@ describe('unit testing angular tree control directive', function() {
       expect($rootScope.itemSelected).toHaveBeenCalledWith('node 1');
     });
 
+    if('should be able to order sibling nodes using orderBy and reverseOrder attributes', function() {
+      $rootScope.treedata = [
+        { label: "a", children: [] },
+        { label: "c", children: [] },
+        { label: "b", children: [] },
+      ];
+      $rootScope.predicate = 'label';
+      $rootScope.reverse = false;
+      element = $compile('<treecontrol tree-model="treedata" orderBy="{{predicate}}" reverseOrder="{{reverse}}">{{node.label}}</treecontrol>')($rootScope);
+      expect(element.find('li:eq(0)').text()).toBe('a');
+      expect(element.find('li:eq(1)').text()).toBe('b');
+      expect(element.find('li:eq(2)').text()).toBe('c');
+      $rootScope.reverse = true;
+      $rootScope.$digest();
+      expect(element.find('li:eq(0)').text()).toBe('c');
+      expect(element.find('li:eq(1)').text()).toBe('b');
+      expect(element.find('li:eq(2)').text()).toBe('a');
+    });
+
     it('should be able to accept alternative children variable name', function () {
       $rootScope.treedata = createSubTree(2, 2);
       $rootScope.treedata.push({kinder: [{}]});