AngularJS指令的菜单模板由一个json带子菜单

AngularJS Directive menu template by a json with submenu

本文关键字：菜单 一个 json 指令 AngularJS      更新时间：2023-09-26

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

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

我认为这是一种方式来访问元素内部的其他元素，鉴于我可以有多个子菜单和菜单。我试图在里面做一个For循环，但它是一个。html模板…有人能帮我解决这个问题吗或者告诉我其他方法?

这里有一个演示:点击这里!

非常感谢!

试试这个，我希望它会按照你的期望工作:

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

解决!

我只是改变了这一行:

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

和条件:

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

$index给出了确切的本地数组。div =)

相关文章：