close #56: Add 'recursive' option to startExpanded to expand all nodes

awendland · Jan 9, 2019 · 8e47e64 · 8e47e64
1 parent 65f5863
commit 8e47e64
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/json-tree.js b/src/json-tree.js
@@ -100,7 +100,7 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper'])
                 '       <span class="leaf-value" ng-if="!isExpandable">{{value}}</span>' +
                 '       <span class="branch-preview" ng-if="isExpandable" ng-show="!isExpanded" ng-click="toggleExpanded()">{{preview}}</span>' +
                 '       <ul class="branch-value" ng-if="isExpandable && shouldRender" ng-show="isExpanded">' +
-                '           <li ng-repeat="(subkey,subval) in value">' +
+                '           <li ng-repeat="(subkey,subval) in value track by $index">' +
                 '               <json-node key="subkey" value="subval"></json-node>' +
                 '           </li>' +
                 '       </ul>',
@@ -123,13 +123,19 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper'])
                         }
                     });
                     scope.preview = scope.preview.substring(0, scope.preview.length - (scope.preview.length > 2 ? 2 : 0)) + (isArray ? ' ]' : ' }');
+                    // If parent directive has startExpanded set to recursive, inherit startExpanded
+                    if (scope.$parent && scope.$parent.startExpanded &&
+                          scope.$parent.startExpanded() == 'recursive') {
+                      scope.startExpanded = scope.$parent.startExpanded;
+                    }
                     // If directive initially has isExpanded set, also set shouldRender to true
                     if (scope.startExpanded && scope.startExpanded()) {
                         scope.shouldRender = true;
                         elem.addClass('expanded');
                     }
                     // Setup isExpanded state handling
                     scope.isExpanded = scope.startExpanded ? scope.startExpanded() : false;
+                    if (scope.isExpanded == 'recursive') scope.isExpanded = true;
                     scope.toggleExpanded = function jsonNodeDirectiveToggleExpanded() {
                         scope.isExpanded = !scope.isExpanded;
                         if (scope.isExpanded) {

diff --git a/test/unit/json-tree-test.js b/test/unit/json-tree-test.js
@@ -21,6 +21,7 @@ describe('The json-tree directive', function () {
 
     var unexpandedHtml = '<json-tree object="someObject"><json-tree>';
     var expandedHtml = '<json-tree object="someObject" start-expanded="true"><json-tree>';
+    var recursiveExpandedHtml = '<json-tree object="someObject" start-expanded="\'recursive\'"><json-tree>';
 
     it('should generate an un-expanded tree', function () {
         var html = unexpandedHtml;
@@ -36,6 +37,18 @@ describe('The json-tree directive', function () {
         compile(elem)(scope);
         scope.$digest();
         expect(elem.html()).toMatch(/.+?<ul .+?>/);
+        expect(elem[0].querySelectorAll('json-node.expanded').length).toEqual(1);
+    });
+
+    it('should generate a recursively expanded tree', function () {
+        var html = recursiveExpandedHtml;
+        var elem = angular.element(html);
+        compile(elem)(scope);
+        scope.$digest();
+        var expanded = elem[0].querySelectorAll('json-node.expanded');
+        var expandable = elem[0].querySelectorAll('json-node.expandable');
+        expect(expandable.length).toBeGreaterThan(1);
+        expect(expanded.length).toEqual(expandable.length);
     });
 
     it('should have no subnodes until click', function () {