angular-tree-control
angular-tree-control copied to clipboard
wix-incubator
Highlight matches of filter expression
It would be great if the filter expression evaluated had an option to replace the label html with some other html when it matched. That way it could highlight the matches.
By default the filter expression looks for contained text, so it could just write a 'matched' text to override for display purposes to <span>my great tree element</span> -> <span>my <i class="highlight">great</i> tree element</span>
while we are at it since its angular anyway, being able to add a compiled html string etc would be awesome too, that way it would be so much easier to add more advanced tooltips or more dynamic designs.
The filter is done using the ng-repeat filters. Can you refer me to such functionality with ng-repeat?
well you show the item using the directive tree-item which could get access to the currently set filter expression -> if such an expression where set it could call a predefined callback (main directive callback attribute for a function) . the function would then be responsible to take the item and return highlighted text.
Hi @matthiasg I was able to get this working using angular-ui highlight. Unfortunately, a quick search of that library shows that it's now deprecated? Anyway, if you manage to install it here's the code I used:
<span ng-bind-html="node.name | highlight:tree.filter"></span>
where tree.filter is your search query string. The end result looks something like this:
