Hi Prince,
Thank you so much for responding .
I checked all the example you given. The thing is menu items are given manually in all the examples, I want those dynamically from the database, whenever i added any new menu item to database it should automatically appear in the menu too.( I am fetching the data from wordpress database of another site and my menu list are on my another website ).
Here is what i have done so far , Please check :
I update my code again:
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
// HTML//
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>Assets/js/angular_app.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>
<script
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>
<link rel="stylesheet" type="text/css" rel='nofollow' href="<?php echo base_url(); ?>Assets/css/angularmenu.css" />
</head>
<body ng-app="menuApp">
<div class="container">
<div id="wrapper1" ng-controller="menuController">
<div id="nav1" >
<ul >
<li ng-repeat="menu in menus" >
<a rel='nofollow' href="{{menu.url}}" >{{menu.post_title}}</a>
<ul ng-controller="subController">
<li ng-repeat="submenu in submenus">
<a rel='nofollow' href="{{submenu.action}}">{{submenu.post_title}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
//app.js//
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
// For parent menu items//
var app = angular.module('menuApp', []);
app.controller("menuController", function($scope,$http)
{
var baseUrl = 'http://localhost:8080/samplepage/';
$http.get(baseUrl+'Home/getmenu').then(function(response)
{
console.log(response);
$scope.menus = response.data; / / I get the parent menu items from the database .
});
});
// For sub menu //
app.controller("subController", function($scope,$http)
{
var baseUrl = 'http://localhost:8080/samplepage/';
$http.get(baseUrl+ 'Home/getsubmenu').then(function(response)
{
console.log(response);
$scope.submenus = response.data ;// Got the sub menu items here.
});
});
I got both the parent menu and sub menu but the problem is .. drop down is came for all the main menus. I want to give drop down to some particular main menu items . How can i accomplish that .
Even if I use json , The title is written manually , Is there any way to give the title dynamically ,then my work became so simple i can give the url also there easily ,
Sample of Json
{
"title":"Home" ,(see the title is written manually , i want this titles dynamically , Is tehre any code for that , I searched and tried a lot couldn't fine anything.or Is it possible)
"type": "GET",
"url":"#"
},
{
"title": "News",
"action": "#",
"menus": [
{
"title": "Local",
"type":"GET",
"action": "#"
Any suggestion is greatly appreciated.
