Highlight currently selected node in expandable tree angularJS

Question

I want to highlight currently selected node in the tree. That means I want to unhighlight previously selected node (if any). I don't want to visit whole tree and deselect the node if already selected.

Please find current implementation at http://plnkr.co/edit/2a9srm7QDYcXhXD2JmrR?p=preview

Can you help me with a better approach than it ?

I am trying to avoid whole tree traversal(in worst condition) for unhighlighting one previously selected node.

Thanks.

Answer 1

You could have a property in your TreeControllerto store the currently selected node. Then you can pass that property (since you have isolate scopes, through two-way-data-binding) to all expandableTree instances (so that all instances share a common property: the currently selected node).

Then you should change the ngClass exression to check if the current node is the selected one, e.g.:

ng-class="{blueBase:node===<propDenotingCurrentlySelectedNode>}"

One thing to note is that due to how prorotypal inheritance works and in order to force each scope to use the inherited property (and not overwrite it locally), you shouldn't pass the property directly, but an object (that contans the property). E.g.:

/* In TreeController */
$scope.cfg = {};

<!-- In the VIEW -->
<expandable-tree family="..." cfg="cfg"></expandable-tree>

/* In the DIRECTIVE */
...
scope: {
    ...
    cfg: '='
},
controller: function (...) {
    ...
    $scope.selectNodeLabel = function (node) {
        ...
        $scope.cfg.currentNode = node;
    }
    ...
},
template:
    '...' +
    '<label ... ng-class="{blueBase:node===cfg.currentNode}" ...' +
    '...' +
    '    <p><expandable-tree family="node" cfg="cfg"></expandable-tree></p>' +
    '    ...' +
    '        <label ... ng-class="{blueBase:step===cfg.currentNode}" ...' +
    '...',
...

---

See, also, this modified demo.