2

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

食谱
。首发
。主菜
.. 鸡肉
.. 素食
.. 意大利面 ... 意大利
面
... 比萨饼
. 沙漠

我很高兴将ng-repeat用于单个层，或者可能是固定少量层的低效实现（使用嵌套ng-repeat的），但不确定如何进行任意深度的导航。

4

2 回答 2

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 将其转移到侧边栏。希望这可以帮助。:)

于 2014-02-05T05:43:21.300 回答
0

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

另一种方法是编写一个自定义的 ng-repetable-deeply 指令，这将更加复杂，并且无论如何您最终都会对该指令执行嵌套循环。

于 2013-03-08T00:58:14.757 回答