We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't create a sub menu using mg-repeat(Angularjs).

Thread ID:

Created:

Updated:

Platform:

Replies:

142429 Feb 4,2019 07:20 AM UTC Feb 12,2019 05:14 AM UTC AngularJS 5
loading
Tags: ejDropdownList
Anna Augutine
Asked On February 4, 2019 07:20 AM UTC

I am trying to display a menu on my page using a single column value from database and another column values as its sub menu dynamically using angularjs.I want to get a drop down under the News. I am failing to find examples of creating menu and submenu from single column value dynamically from database via angularjs .

.embed.plnkr.co/plunk/BUjnqq6PbJ5fjA9Q- This is my code on plunker.com.
The sub menu is added manually. $scope.menus = [ { title: "Home", type: "GET", url:'#' }, All the 'title' is given manually, instead I want it dynamically , whenever I add any sub menu or main menu it should automatically changed in my page too. I got the main menu by using ng-repeat , , The problem is if i use ng-repeat , there is no way to create a sub menu .. Is there any way for that.


Any suggestions are greatly appreciated. Thanks in advance.

Prince Oliver [Syncfusion]
Replied On February 5, 2019 11:12 AM UTC

Hi Anna, 

Thank you for contacting Syncfusion support. 

We have checked your reported scenario for “single column menu with submenu”. We have prepared sample based on your requirement for single column menu display in main menu and use another column data to show submenu of the main menu. Please find the sample for your reference. 

If you need to json data to load menu component refer the below demo for your reference. 

Kindly refer to the following UG documentation: https://help.syncfusion.com/angularjs/menu/data-binding 

Regards, 
Prince 


Anna Augutine
Replied On February 6, 2019 10:50 AM UTC

Thank you so much for your response. 

I am trying to  create 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 I changed the method to this:

   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;

 });

});, By using this code i get the main menu item , and print it using <a rel='nofollow' href="{{menu.url}}">{{menu.post_title}}</a>. This is the result i got:


But im struggling to create a sub menu under the News. 

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.

my sample structure of the database is given below:



I hope you understand what my problem. If not please tell me . 

Any suggestions are greatly appreciated. Thanks in advance.



Prince Oliver [Syncfusion]
Replied On February 7, 2019 10:27 AM UTC

Hi Anna, 

Thank you for your update. 

We suggest you refer to the following Blog for more details on bootstrap menu with sub menu option. 


Kindly refer to the following link for the sample 


Please let us know if you need any assistance in Syncfusion controls. 

Regards, 
Prince 


Anna Augutine
Replied On February 8, 2019 07:53 AM UTC

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.

Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On February 12, 2019 05:14 AM UTC

Hi Anna, 
  
We could see your using third party controls in your requeriement. Kindly contact the cloudflare support for further assistance. 
  
Regards, 
Preethi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon