How to implement hierarchical navigation in angularjs?

Question

How would one go about implementing hierarchical navigation in angularjs? For example, given the site structure below how could it be implemented in a sidebar using angularjs?

Recipes
. Starters
. Mains
.. Chicken
.. Vegetarian
.. Italian
... Pasta
... Pizza
. Deserts

I'm happy enough using ng-repeat for a single layer, or a likely inefficient implementation of a fixed small number of layers (using nested ng-repeat's), but not sure how to proceed with an arbitrary depth of navigation.

Harsh · Accepted Answer · 2014-02-06 10:24:42Z

1

Try this: You can use same NG-REPEAT logic for recipes in your "categories" and "recipes" too if you want data from JSON.

<ul>

<li>
<a href="#"> Recipes</a>
</li>
     <ul>
        <li>
        <a href="#"> Categories</a>
        </li>

        <ul >
        <li ng-repeat="recipe in recipes>
        <a href="#/recipes/{{recipe.id}}"> <img ng-src="{{recipe.imageUrl}}"></a>
        </li>
        </ul>

     </ul>
</ul>

Here recipes is list of recipes you have. {{recipe.id}} and {{recipe.imageURL}} is getting picked  from JSON file where all this data is available.

for controller.js:



var recipeControllers = angular.module('recipeControllers', []);

recipeControllers.controller('recipeSideListCtrl', ['$scope', '$http', 
     function ($scope, $http) { 

$http.get('app/recipes/recipe.json').success(function(data){


$scope.recipes = data;


}}]);

Rest you can use your CSS to shift this to your side bar. Hope this helps. :)

edited Feb 6, 2014 at 10:24

answered Feb 5, 2014 at 5:43

Harsh

1,7051 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

axzr Over a year ago

Hey, thanks for the suggestion. I don't think it works in this instance. In this instance I'm not trying to list recipes, I am trying to list /categories/ of recipes.

Harsh Over a year ago

So what I am getting is you want following structure. -->Recipes -->--> Cateogires -->-->--> particular recipe For that you can just add one more <UL> for category names and in those category you will get recipes. I will edit it.

Harsh Over a year ago

You can use same NG-REPEAT logic for recipes in your "categories" and "recipes" too if you want data from JSON.

axzr Over a year ago

The bit you're missing is that I want to deal with an arbitrary depth of subcategories. For any given depth I could use n nested ng-repeats but what I am looking for is a way to handle this /without/ nesting ng-repeats by hand.

Harsh Over a year ago

I get your problem completely now. You don't want to manipulate it by hand but via NG-repeat itself somehow automatically, correct me if I am wrong. Will look into if I get sometime from work. :)

|

odiseo · Accepted Answer · 2013-03-08 00:58:14Z

0

I wouldn't worry about using nested ng-repeat directives, since a nested loop would be programatically necessary to do this. They do pretty much the same in AngularUI. Check "Sortable" directive in http://angular-ui.github.com/

The alternative would be to write a custom ng-repetable-deeply directive, which would be much more complicated and you'd end up doing a nested loop on that directive anyway.

answered Mar 8, 2013 at 0:58

odiseo

6,7842 gold badges22 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to implement hierarchical navigation in angularjs?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related