diff --git a/src/json-tree.js b/src/json-tree.js index bfa83e7..7e53789 100644 --- a/src/json-tree.js +++ b/src/json-tree.js @@ -112,6 +112,10 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper']) scope.isExpandable = true; // Add expandable class for CSS usage elem.addClass('expandable'); + // Add a class indicating an empty Object/Array (for removing expandable UI, if desired) + if (Object.keys(scope.value).length < 1) { + elem.addClass('empty'); + } // Setup preview text var isArray = utils.is(scope.value, 'Array'); scope.preview = isArray ? '[ ' : '{ '; diff --git a/test/unit/json-tree-test.js b/test/unit/json-tree-test.js index 1b024c2..107b367 100644 --- a/test/unit/json-tree-test.js +++ b/test/unit/json-tree-test.js @@ -12,9 +12,11 @@ describe('The json-tree directive', function () { scope.someObject = { test: 'hello', array: [1,1,2,3,5,8], + emptyArray: [], + emptyObject: {}, subObj: { subTest: 'hi', - subArray: [2,1,3,4,7,11] + subArray: [2,1,3,4,7,11], } }; }); @@ -51,6 +53,15 @@ describe('The json-tree directive', function () { expect(expanded.length).toEqual(expandable.length); }); + it('should indicate which expandable nodes are empty', function () { + var html = expandedHtml; + var elem = angular.element(html); + compile(elem)(scope); + scope.$digest(); + var empty = elem[0].querySelectorAll('json-node.empty'); + expect(empty.length).toEqual(2); + }); + it('should have no subnodes until click', function () { var html = unexpandedHtml; var elem = angular.element(html);