Hi connoisseurs, I need help ... Through ul> li ng-repeat I bring out the menu. For the li element containing the condition in JSON (true), you need to add the data-uk-dropdown attribute for the jQuery plugin to work. Thank you in advance)

html

<nav ng-controller="MenuController as vm" > <ul> <li ng-repeat="item in vm.menu" ng-class="vm.getClass('{{ item.path }}') ? 'active' : '' || (item.submenu === true) ? 'parent' : ''" > <a href="{{ item.path }}">{{item.name}}</a> </li> </ul> </nav>

Js

 .controller('MenuController', MenuController) function MenuController($location, $http) { var vm = this; $http.get('menu.json').success(function(data) { vm.menu = data; vm.submenus = function(index) { var result = data[index].pages; return result; }; }; vm.getClass = function(path) { return ($location.path() === path) ? 'active' : ''; }; }

Json

 [{ "name": "Меню 1", "path": "/", "submenu": false }, { "name": "Меню 2", "path": "#", "submenu": true }, { "name": "Меню 3", "path": "/menu3", "submenu": false }]
  • What is this attribute for? - Grundy
  • @Grundy for the drop-down menu ( getuikit.com/docs/dropdown.html ) - sashatexb
  • Is this a jQuery plugin menu? Angulyar directive? or something else? Apparently, simply adding an attribute is indispensable - Grundy
  • @Grundy yes, it works via jQuery - sashatexb
  • then, in fact, the question can be rephrased as: how to initialize the jQuery plugin in an angular application - Grundy

1 answer 1

Try this:

 <nav ng-controller="MenuController as vm" > <ul> <li ng-repeat-start="item in vm.menu" ng-class="vm.getClass('{{ item.path }}') ? 'active' : '' || (item.submenu === true) ? 'parent' : ''" ng-if="item.submenu" data-uk-dropdown > <a href="{{ item.path }}">{{item.name}}</a> </li> <li ng-repeat-end ng-class="vm.getClass('{{ item.path }}') ? 'active' : '' || (item.submenu === true) ? 'parent' : ''" ng-if="!item.submenu" > <a href="{{ item.path }}">{{item.name}}</a> </li> </ul> </nav>