Question

如何在angularjs中实现分层导航？例如，给定下面的站点结构如何使用angularjs在侧栏中实现？

食谱
。首先
。电源
..鸡 ..素食者 ..意大利语 ...意大利面 ...比萨饼。沙漠

我很高兴单层使用 ng-repeat ，或者固定少量图层可能效率低下（使用嵌套 ng-repeat ' s），但不确定如何进行任意深度的导航。

Answer 1

试试这个：如果你想要来自JSON的数据，你也可以在“类别”和“食谱”中使用相同的NG-REPEAT逻辑。

<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;


}}]);

您可以使用CSS将其转移到侧栏。希望这可以帮助。：）

Answer 2

我不担心使用嵌套的ng-repeat指令，因为嵌套循环在编程上是必需的。它们在AngularUI中几乎完全相同。检查http://angular-ui.github.com/

中的“可排序”指令

另一种方法是编写一个自定义的ng-repetable-deep指令，这将更加复杂，你最终还是会在该指令上做一个嵌套循环。

如何在angularjs中实现分层导航？

2 个答案: