Using AngularJs, I am able to retrieve data from a MySQL database for my navigation bar on an HTML5 page. However, there seems to be an issue with opening links in the sub menu. Below is a snippet of my code:
<div id="header-wrapper" class="wrapper">
<div ng-app="myApp" ng-controller="customersCtrl" id="header">
<div id="logo">
<h1><a href="index.html">Why Choose a Breeder ?</a></h1>
<p>Quality Quarantee Knowledge</p>
</div>
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="hollandlop.html">Holland Lops</a>
<ul>
<li><a href="hollandlop.html#buck" id="bucks">Bucks</a></li>
<li><a href="hollandlop.html#doe" id="does">Does</a></li>
<li><a href="hollandlop.html#junior" id="juniors">Junior</a></li>
</ul>
</li>
<li><a href="sale-policy">For Sale</a></li>
<li><a href="sale-policy">Article</a>
<ul><li ng-repeat="menu in menues"><a href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li></ul>
</li>
<li><a href="why-breeder.html#contact" id="contact">Contact us</a></li>
</ul>
</nav>
</div>
https://i.sstatic.net/QVzuC.jpg
Upon further investigation, it appears that the link cannot be opened when clicking within this section of code:
<ul><li ng-repeat="menu in menues"><a href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li></ul>
If I remove the ul tags, like shown below:
<li><a href="sale-policy">For Sale</a></li>
<li><a href="sale-policy">Article</a></li>
<li ng-repeat="menu in menues"><a href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li>
https://i.sstatic.net/ncJHN.jpg
I found that the link can be successfully opened. Could it be an issue related to the order of elements in the navigation bar? Any suggestions on what could be wrong?
Here is the relevant .js code:
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http',function($scope, $http){
$scope.menues = [];
$http.get("http://www.rhosgobelrabbit.com/getUrl.php")
.then(function (data) {$scope.menues = data.data.records;
}, function (error) {
alert('Error');
});
}]);