Question

我是angularJs的新生。我想通过.json创建一个带子菜单的菜单。一个动态菜单，我可以通过相同的.json添加菜单和子菜单。

<a href="#" ng-repeat="item in menuHeader">{{item.NAV.menu[x].subItens[x].nome}} </a>

我认为这是一种在其他元素中访问元素的方法，因为我可以有多个子菜单和菜单。我试图在里面做一个For循环，但它是一个.HTML模板......所以有人可以帮我解决这个问题或者向我展示其他方式吗？

这是一个演示：CLICK HERE!

非常感谢！

Answer 1

试试这个我希望它能按照您的期望：

运作

＆＃13;

var app = angular.module('myApp', []);

function Ctrl($scope) {
    var data = [
    {
        "NAV": {
            "menu": [

                {
                    "id": 0,
                    "nome": "Menu 1",
                    "subItens": [
                        {
                            "id": 0,
                            "nome": "SUB MENU 1"
                        },

                        {
                            "id": 1,
                            "nome": "SUB MENU 2"
                        },

                        {
                            "id": 2,
                            "nome": "SUB MENU 3"
                        }
                    ]
                },

                {
                    "id": 1,
                    "nome": "Menu 2",
                    "subItens": [
                        {
                            "id": 0,
                            "nome": "SUB MENU 1_2"
                        },

                                                {
                            "id": 1,
                            "nome": "SUB MENU 2_2"
                        }
                    ]
                },
                
                {
                    "id": 2,
                    "nome": "Menu 3",
                    "subItens": [
                        {
                            "id": 0,
                            "nome": "SUB MENU 1_3"
                        }
                    ]
                }

            ]
        }
    }
];

    $scope.menuLinks = data[0].NAV.menu;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
                    <ul class="nav">
                        <li ng-repeat="link in menuLinks"><a href="{{link.url}}" class="{{link.sub && 'dropdown-toggle' || ''}}" data-toggle="{{link.sub && 'dropdown' || ''}}">{{link.nome}}
                        </a>
                            <ul class="dropdown-menu" ng-show="link.subItens">
                                <li ng-repeat="subItem in link.subItens"> <a href="#123">{{subItem.nome}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
</div>

＆＃13;

Answer 2

解决！

我只是改变了这一行：

 <a href="#" ng-click="changeSub($index)">

和条件：

ng-show="$index == currentID">

$ index为我提供了确切的本地数组。 =）

AngularJS指令菜单模板由json和子菜单组成

2 个答案: