Multiple conditions for ui-sref-active

[Hypocrite]

I am using version 0.2.17 of ui-router.

The problem is that I would like to use the possibility to have multiple rules for ui-sref-active. For example like this:
ui-sref-active="{'active': 'videos.*', 'active': 'files.*'}

Is this somehow possible? At the moment it only takes the last condition.

[BrianCerasuolo]

Having this same issue, thought maybe I was using the syntax incorrectly. It looks like it will work with multiple things, but only one of them can have the .* glob.

[fpipita]

Hi, when used with the object literal syntax, ui-sref-active parses its argument as a plain JavaScript object: keys should be unique.

That's why only one of the conditions applies.

ui-sref-active="{'active': 'videos.*', 'active': 'files.*'}

+1

[christopherthielen]

I'd consider ui-sref-active="{'active': ['videos.*', 'files.*']}

[scooper91]

Hi! Is there any update on this? It's exactly what we need for our navbar!

[mishevski8]

+1

[jcugmas]

+1 no update for this for now, it will be useful !

[christopherthielen]

I'd be happy to merge a PR (please add tests around here)

ui-router/test/stateDirectivesSpec.js

Lines 410 to 415 in 5b54cbf

	expect(template[0].className).not.toContain('activeeq');
	}));
	it('updates to a new href when it points to a new state', function () {
	expect(angular.element(template[0]).attr('href')).toBe('#/contacts');

In the meantime,you can accomplish this with a little bit of shenanigans by nesting hidden ui-sref inside a parent ui-sref-active.

    <button ui-sref-active="active" class="btn btn-success">
      Foo is active
      <div style="display: none" ui-sref="foo.**"></div>
    </button>

See this example: http://plnkr.co/edit/URTdcIWcIgUAqa15PoH2?p=preview