angularjs - Dynamic class name ngRepeat root element -
i trying use model add class names each root element of ngrepeat. need each li have unique class name. there anyway this?
class="{{item.clazz}}"
<nav id="main-menu"> <ul> <li ng-repeat="item in menus[0].items" class="{{item.clazz}}"> <a class="dropdown-toggle" href="#" slidedown-toggle><i class="{{item.icon}}"></i><span>{{item.name}}</span></a> <ul class="dropdown-menu"> <li ng-repeat="link in item.items[0].items"> <a href="{{link.link}}">{{link.name}}</a> </li> </ul> </li> </ul> </nav> items: [{ title: 'about us', icon: 'icon-about', clazz: 'about-us-menu', items: [{ name: 'who we?', icon: '', link: '#' }, { name: 'our partners', icon: '', link: '#' }, { name: 'careers', icon: '', link: '#' }, { name: 'stuff cms', icon: '', link: '#' }] }]
looking @ code have clazz on top level object ng-repeat looking @ item.clazz
return undefined.
so either items array objects should similar to:
items: [{ name: 'who we?', icon: '', link: '#', clazz: 'unique-class-name' }, { name: 'our partners', icon: '', link: '#', clazz: 'unique-class-name' }]
or if want 'about-us-menu' class applied li use following:
<li ng-repeat="item in menus[0].items" class="{{menus[0].clazz}}">
Comments
Post a Comment