как использовать 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