Wildcard support in $state.is() and $state.includes()

[gsklee]

I am doing some app that given the following state hierarchy:

choose
choose.color
choose.size
(more choose.x)
choose.color.category
choose.size.category
(more choose.x.category)

I need to apply some CSS classes when the state is in the second hierarchy but not the third.

Currently the only way to do so seems to be hard-coding every possible state:

$state.is('choose.color') && $state.is('choose.size') && ... // listing out all other second hierarchical states

It would be nice if we can simply do something like $state.is('choose.*').

[nateabele]

Have you tried $state.includes()?

[gsklee]

I need to select all 2nd hierarchical states but not the 3rd. I don't think there is any way to achieve this using $state.includes() currently.

In the case that the wildcard character become supported, the desired states can be selected either through:

$state.is('choose.*')

or

$state.includes('choose.*') && !$state.includes('choose.*.*')

I've updated the title of the issue accordingly.

[timkindberg]

Just some pseudo code (you'd have to really figure it out) but what about testing if $state.parent is equal to "choose"

[ksperling]

@gsklee I'd suggest you put add a property like level to your state.data objects, then you can do something like $state.current.data.level == 2

[gsklee]

@ksperling That seems to be a very valuable info about the current structure of the state and I wonder why not include that info officially?

[ksperling]

hm well the level seems like something that would change fairly easily if you decide to insert another state at the top of your hierarchy... A bit like counting how many directories deep you are in a file system, if you move around a part of the tree the depth of everything in that tree will likely change. So I think as a generic mechanism it's probably a little too brittle.

[nateabele]

I don't think we're going to approach this in this way. Once we implement an API for traversing and manipulating the state tree, we can think about implementing accessors like depth() and other ways to tersely select states.

[just-boris]

I would try to do it using regexp

$state.mathes = function(stateName) {
    var regexp = new RegExp('^'+stateName.replace(".", "\.").replace('*', '[\w]+'))
    return regexp.test($state.current.name);
}

And you may use wildcards to find any you needed state

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb