CODEWITHSUNDEEP
angularjsclassmenu
CodyBugstein
CodyBugstein

Reputation: 23322

Angular active menu item but not related to routing

My Angular app teaches kids how to cook. The main screen of the app is a kitchen.

On the left, the user can select a food category of the ingredient they want to add. Then, in the next column, they can select the specific food.

So for example, if they want to see all the spices, they click "Spices" and then drag the exact spice into the pot.

My question is, how can I get the "Spices" button to be highlighted while it is in use?

I've seen some similar questions but they are all related to routing. This is not related to routing (i.e. the page is not changing)

Kitchen Pantry App

Upvotes: 0

Views: 82

Answers (1)

hon2a
hon2a

Reputation: 7214

Use ng-class to toggle some sort of 'selected' class based on what is unique about your data when you click on that particular menu item. It could look something like this:

<a ng-click="items = spices" ng-class="{selected: (items === spices)}">Spices</a>

Then you just need to create a style for your .selected items.

Upvotes: 1

Related Questions