javascript - 如何使用 angularJS 显示动态菜单

Question

我是 Angular 新手，在下面的页面中，我使用 ngRoute 作为左侧的菜单。现在尝试在蓝色圆圈区域中显示所选项目。HTML 代码:

<nav layout="row" layout-align="start center">
    <a href="#/dashboard">Dashbord</a>
    <a href="{{}}">{{testmenu}}</a>
</nav>

我想做的是将“testmenu”与 Controller 中的 $location.path() 绑定(bind):

$scope.testmenu = $location.path().replace('/', ''); 

但是当我单击左侧菜单上的不同项目时，“testmenu”不会立即更改，只有刷新整个页面时才会更改。这是我的第一个问题。

<小时/>

我只是使用两个固定的 a 元素。会有更多的子项目，我不知道如何使它们更加动态(例如，第一个项目始终是“仪表板”，当我单击它时，它的子项目(如图中的“master”)应该是隐藏。

Answer 1

1.使用ng-repeat用于将范围变量中的数据显示为循环。

例如，我使用 ngRepeat 显示菜单项，如下所示:

template.html(模板文件)

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(name, url) in menuItems"><a href={{url}}>{{name}}</a></li>
    </ul>
</div>

mycntrl.js( Controller 文件)

var items = {
    "Deshboard": "http://domain.com/",
    "My Account": "http://domain.com/my-account",
    "My Profile": "http://domain.com/my-profile"
};

function MyCtrl($scope) {
    $scope.menuItems = items;
}

从上面的示例代码中显示三个带有链接的菜单项，就完成了。

2. 隐藏显示子菜单项的原始示例 here