ee / angular-ui-tree-filter

A module providing an AngularJS filter which can be used with angular-ui-tree to match tree nodes.

#ui.tree-filter

A module providing an AngularJS filter which can be used with angular-ui-tree to match tree nodes.

Table of Contents generated with DocToc

• How it works?
• How to use?
• Configuration reference
• Performance
• Support

How it works?

1. It's is configurable:

• you may provide default properties of your nodes that should matched against provided pattern:

angular.module('myApp')
  .config(function (uiTreeFilterSettingsProvider) {
    uiTreeFilterSettingsProvider.addresses = ['title', 'description', 'username'];
  });

• or you may pass property list as an optional 3rd argument:

$filter('uiTreeFilter')(nodeObject, pattern, ['title', 'description', 'username'])

2. It matches the whole path If a sub-node matches all its ancestors up to the tree root match as well:

Filtered string: "the matched string"

    1. Foo
    2. Bar                            # matches as one of its descendants matches
        2.1 Baz                       # matches as one of its descendants matches
            2.1.1 The matched string  # matches exactly

How to use?

Filter can be used in the template to as an argument of the ng-show or ng-if.

<input ng-model="pattern">
<script type="text/ng-template" id="items_renderer.html">
  <div ui-tree-handle>{{item.title}}</div>
  <ol ui-tree-nodes ng-model="item.items">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'" 
        ng-hide="filter(item, pattern)">
    </li>
  </ol>
</script>
<div ui-tree>
  <ol ui-tree-nodes ng-model="list">
    <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'" 
        ng-hide="filter(item, pattern)"></li>
  </ol>
</div>

Configuration reference

• addresses (default: ['title']): properties of notes against which pattern will be matched. Deep filed access is supported: one can provide foo.bar.baz to match against item.foo.bar.baz value.
• regexFlags (default: 'gi'): Regular expression flags applied during he matching
• descendantCollection (default: 'items'): name of item property that holds item descendants

Performance

The filter is not provided with any performance improving mechanisms. It may turn out suboptimal for large trees with thousands of nodes and. If you need it to become perform better let us know what your case is by filing an issue

Support

Basically all the browsers down to Firefox 3.0, IE 9, Opera 10.5 and Safari 4.0 are supported.

Potential support blockers:

• Array.reduce support: Fx 3, IE 9, Op 10.5, Sf4
• Array.forEach support IE 9

If you wish to support IE8 (as AngularJS 1.2.x do) you'd have to provide proper polyfills. But you know it anyway

License

The module is available under the MIT license (see LICENSE for details).

angular-ui-tree-filter's Issues

Show all child nodes for a matching parent

If Parent Matches but no child matches,then the filter should return all the child elements,whereas if children matches then the filter should return the parent and the matching children.

search only by child node's attribute, and show with his all parent node to root node.

Hi,
I have collapsed tree. I want search only by child node's attribute, and show all match nodes with his parent node to root node.

Thanks ......

extensibility with custom comparator functions

I started working on next release which will incorporate new way to configure the filter: comparators.
Instead of restricting string comparison (which is default in 0.1) user will be able to compare other types with ability to implement his business logic into the filter itself where needed.
It may be found on https://github.com/EE/angular-ui-tree-filter/tree/wip-comparators
So far I provided proof-of-concept implementation for simple operator expressions like "> 10" or "<=15".

I'd appreciate any suggestions
cc
@pathes @mzgol @sicarrots @JimLiu @QcRafal

fix(uiTreeFilter): 'const' and 'let' are being causing error with 'use strict'

On Chrome Canary, I've added your script with Bower on my app and it breaks right on the load.

The causes, apparently, are the 'cons' and 'let' vars, which are causing the following error:

Uncaught SyntaxError: Use of const in strict mode.

Changing these typos to general declaration 'var' made my app works and your script too, but it seems that it acts like the normal filter over the uiTree.

Invalid expressions when using search

Hello dev,

If you make a search filter like this plnkr
And you type "[ or ] or {,},*,,|,(,)" in the searchbar it gives an invalid expression error and it basicly creates infinite errors as long as you keep it in the search box (in my live enviroment), this will actually create so many errors that it can slow down and even crash the browser.

I hope this information might be usefull to someone I validate the search bar to not be able to use those characters now.

Filtering arrays

Hi

Is it possible to use this library to filter on an array?
For example, we have the following object :
{ "id": "1234", "name": "filename", "tags": [ "57569226c86f0238048d6499" ], "contentType": "57a0af22ba4b03af610afdee", }

We would like to filter on "contentType" and on "tags". If we do the following in our code, it works perfectly :

`

`

But if we try that with tags (which is an array), the filter does not work.

Thanks,

Robbert

issue with filtering at child level

Angularjs UI tree filtering feature is not working at child level however it is working fine at group level. For example if we type node1 or node2 filtering works fine, but if we type node1.2 or node2.1, filtering won't work properly. Please find http://plnkr.co/edit/paTTL33sOffTGJJxC3j5?p=preview.

If I add the following code to my script.js file everything is scrapping out. So I have commented that part in my plunker.

Get all tree above a certain node

Hi there,

I am using ui-tree for managing groups in my project and I have a full tree of a group on one side, and i can select various nodes and then add them to a new list. However I am looking for a way to only add a the selected nodes and all the other ones above the last selected node in the hierarchy.

so say i have this:

Company name

• Board of directors
• Finance
  ---- Global Finance
  -------- Financial department
  -------- Region Asia Pacific
  ---- Tax and co

and I select Board of Directors and Financial department, I want to have in a new ui-tree

Company name

• Board of directors
• Finance
  ---- Global Finance
  -------- Financial department
  -------- Region Asia Pacific

Is there an easy way to do this? how would you guys go about it?

Right now I am only copying the whole structure over and showing in bold the selected groups and disabling the unselected ones.

Expand children when pattern matches

Hi,

I have collapsed tree for better performance. Is it possible on search to expand the root node if it contains child whose name matches the search value ?

Best