Conditionally hide menu items


#1

Hi All

Can anyone tell me of an easy way to conditionally hide menu items. Are there any directives like showsubs = !showsubs available to use?

The only difference is I would like the menu items to be visible but inactive until the menu item above it has been navigated to and the activity within that section completed.

Any help and pointers will be greatly appreciated.

Thanks Mark


#2

Not sure what the goal is, but it would help if you had a codepen setup so we could tinker with it.

As for hiding something based on a condition, ng-if should do it:

https://docs.angularjs.org/api/ng/directive/ngIf


#3

Hi Mojugbe

Thanks very much for your reply.

Here is a basic codepen:

Would I be right in saying that I then need to add CSS classes for a class that has been assigned the ng-if directive?

What I would like to do is have session 2, 3 etc. greyed out an un selectable to start with until session 1 is complete.

Thanks


#4

I’d disable pointer events for the sessions that aren’t completed. Then, have a button in each session that can be used to mark it as completed.