I added ng-class to my dropdown menu, to give different classes to the navigation points. Now the subitems don't working anymore, when I hover (just with a click the subitems will open).
<section class="top-bar-section para">
<ul class="left para">
<li class="divider2"></li>
<li ng-class="{'has-dropdown para divider2':navigation.type == 'Sub', 'nav_button divider2':navigation.type == 'Main'}" ng-repeat="navigation in nav.links">
<a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="para">{{navigation.name}}</a>
<a ng-if="navigation.type == 'Sub'" href="#" class="para">{{navigation.name}}</a>
<ul ng-if="navigation.type == 'Sub'" class="dropdown">
<li ng-repeat="subitem in navigation.subitems"><a href="{{subitem.link}}">{{subitem.name2}}</a></li>
</ul>
</li>
</ul>
</section>
With this Code it is working - But then the navigation point with no submenu has wrong class
<section class="top-bar-section para">
<ul class="left para">
<li class="divider2"></li>
<li class="has-dropdown divider2" ng-repeat="navigation in nav.links">
<a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="para">{{navigation.name}}</a>
<a ng-if="navigation.type == 'Sub'" href="#" class="para">{{navigation.name}}</a>
<ul ng-if="navigation.type == 'Sub'" class="dropdown">
<li ng-repeat="subitem in navigation.subitems"><a href="{{subitem.link}}">{{subitem.name2}}</a></li>
<!--<li><a href="#">Dropdown Option</a></li> -->
</ul>
</li>
</ul>
</section>
And here my JSON File and Controller.
{
"projectTitle": "Test",
"menutitlemobile": "Menu",
"links": [
{
"type": "Sub",
"name": "Menu1",
"subitems": [{
"name2": "Sublink1",
"link": "http://www.google.com"
},
{
"name2": "Sublink2",
"link": "http://www.google.com"
}]
},
{
"type": "Main",
"name": "Menu2",
"link1": "http://www.google.com"
}
]}
app.controller('NavCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'navigation.json',
data: 'json',
cache: 'false'
}).success(function (data) {
$scope.nav = data;
})
.error(function(data, status) {
console.error('Repos error', status, data);
});});
I edited your plunker a bit, have a look at http://plnkr.co/edit/CZiKTApTbkc3gnzy5eMl?p=preview
Be sure to load AngularJS only once and jQuery to be loaded before AngularJS ( index.html
).
In app.js
I added a $timeout
after your data is loaded. With this "out of scope" action it seams to work.
Not nice, but it works ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.