I am trying to display a menu on my page using the values from the WordPress database of another site. This is what I have done so far:
app.js
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.menus = [
{
title: "Home",
type: "GET",
url:'#'
},
{
title: "News",
action: "#",
menus: [
{
title: "Local",
type:"GET",
action: "#"
},
{
title: "Kerala",
action: "#"
},
{
title: "National",
action: "#"
},
{
title: "World",
action: "#"
}
]
},
{
title: "Entertainment",
action: "#",
menus: [
{
title: "Malayalam",
action: "#"
},
{
title:"Tamil",
action:"#"
},
{
title:"Hindi",
action:"#"
},
{
title:"English",
action:"#"
}
]
}
];
});
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<div id="wrapper1" class="container">
<div id="nav1">
<div><span></span> </div>
<ul>
<li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="{{menu.lastOrFirst}}" >
<a href="{{menu.url}}">{{menu.title}} <span ></span></a>
<ul ng-if="menu.menus">
<li ng-repeat="submenu in menu.menus" class="has-children">
<a href="{{submenu.action}}">{{submenu.title}}</a>
<ul ng-if="submenu.menus" ng-class="submenu.class">
<li ng-repeat="subsubmenu in submenu.menus">
<a href="{{subsubmenu.action}}">{{subsubmenu.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
https://next.plnkr.co/edit/3Ai7xECU1a1EPqkoxqwI?p=preview&preview - my code in plunker.com.
The question in Detail:
I am creating a menu list in my new web page and data are taken from the WordPress database of another site.
so whenever a new menu item is added to this WordPress database it should automatically change in my page too without re-writing the code.
In this above code, the menu items and sub menu items are manually written in the JSON so whenever any new menu item is added to the WordPress database I need to add it in the code too.
so Is there any way to get the new menu items adding to the database to appear in the menu on my new web page dynamically.
Any suggestions are greatly appreciated. Thanks in advance. The new result after I change the code
This is the sample databse table im trying to fetch: Table name: wp_post sample structure of the databse
//UPDATED//
//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" href="<?php echo base_url(); ?>Assets/css/angularmenu.css" />
</head>
<body ng-app="menuApp">
<div class="container">
<div id="wrapper1" class="container" ng-controller="menuController">
<div id="nav1" >
<ul >
<li ng-repeat="menu in menus" >
<a href="{{menu.url}}" >{{menu.post_title}}</a>
<ul ng-controller="subController">
<li ng-repeat="submenu in submenus">
<a href="{{submenu.action}}">{{submenu.post_title}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
//app.js//
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;
});
});
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;
});
});
I got the main menu and sub menu through this code dynamically . but but i get drop down for all the main menu. I only want a drop- down for the News.
- {{user.post_title}}
, The problem is if i use ng-repeat , there is no way to create a sub menu .. Is there any way for that . – PHP Devloper Feb 04 '19 at 04:54