Php 尝试使用从另一个站点的wordpress数据库动态获取的数据在新网页中创建菜单
我正在尝试使用另一个站点的WordPress数据库中的值在我的页面上显示菜单。这就是我到目前为止所做的： app.js index.htmlPhp 尝试使用从另一个站点的wordpress数据库动态获取的数据在新网页中创建菜单,php,angularjs,Php,Angularjs,我正在尝试使用另一个站点的WordPress数据库中的值在我的页面上显示菜单。这就是我到目前为止所做的： app.js index.html 我通过这段代码动态地得到了主菜单和子菜单。但是我有所有主菜单的下拉菜单。我只想要一个新闻下拉列表。看看app.js，我使用$http对服务器进行API调用，服务器将以json格式提供响应。您需要使用$http调用服务器。我希望有帮助 我正在使用json获取数据。用服务器调用替换它 angular.module('plunker', []).controll
我通过这段代码动态地得到了主菜单和子菜单。但是我有所有主菜单的下拉菜单。我只想要一个新闻下拉列表。看看
app.js$httpjson响应。您需要使用$http
调用服务器。我希望有帮助
我正在使用json
获取数据。用服务器调用替换它
angular.module('plunker', []).controller('MainCtrl', function($scope,$http) {
// $http.get('/your_wordpress_API_to_provide_menu_data/',function(response){
$http.get('data.json').then(function(response){
console.log(response)
$scope.menus = response.data;
})
});
更新：
检查这将是{{menu.post_title}}
我假设像@ShashankVivek这样的东西我改变了，谢谢你，我将在plunkr.com上提供我的代码，即使菜单标题是从数据库中获取的，因此它在plunkr中无法正确显示。请检查上面。我已经给出了所有的html、angular脚本和css。使用另一个ng-reapeat，我可以创建子菜单，但我不知道如何将这些子菜单放在新闻下面（检查结果的图像）。这也有助于我查看API的响应结构。没有看到我不想猜测对象结构感谢您的响应，我正在使用codeigniter，我将app.js和data.json都保存在Assets/js文件夹中，可以吗。@PHPDevloper:可以，但您不需要保存data.json
，因为这些数据将来自后端服务器
。我希望你能找到解决办法。如果是，请将其标记为回答谢谢您的回复，我几乎接近预期结果，上面我显示了根据您的建议更改代码所得到的结果。请查收。我使用该代码获得菜单项，但我的疑问是如何在新闻下方创建下拉列表？我在那里看不到任何选项。@PHPDevloper:显示您从数据库获得的响应请在我更改上述代码后检查新结果，这是从数据库获得的响应的屏幕截图。
<!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>
<!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>
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;
});
});
angular.module('plunker', []).controller('MainCtrl', function($scope,$http) {
// $http.get('/your_wordpress_API_to_provide_menu_data/',function(response){
$http.get('data.json').then(function(response){
console.log(response)
$scope.menus = response.data;
})
});