如何使用angularJS显示动态菜单

Question

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

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

我要做的是将“testmenu”绑定到控制器中的$ location.path（）：

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

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

我只是使用两个固定的元素。会有更多的子项，我不知道如何使它们更具动态性（例如，第一项始终是“仪表板”，当我点击它时，它的子项（如图中的“主”）应该是隐藏。

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 （控制器文件）

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隐藏展示子菜单项的原始示例