ng-repeat dropdown submenu with output json file (done)

Question

I'm trying to set submenu for dropdown menu, this submenu should come from output json file, this is plunker example, first level is generating from json object from scope, submenu should be generate from json file. In console I see that controller see my json file and objects inside but for some reason it's not render submenu, where is my mistake? I appreciate any help.

my code:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'World';

  $scope.entities = ["Main", "Submain", "Class"];
   $scope.a1 = false;

        $scope.getEnt = function(){
            "use strict";
            for (var i = 0; i < $scope.entities.length; i++){
                if ($scope.entities[i] == "Main"){
                    // $scope.a1 = true;
                    console.log($scope.ast);
                    console.log("check");


         $http.get('ast.json')
                        .then(function (response) {
                            $scope.ast = response.data;
                            console.log($scope.ast);
                        });

      $scope.getDomain = function () {
            "use strict";
            for (var i = 0; i < $scope.ast.length; i++) {
              alert($scope.ast[i].children)
            }
         }
                }
            }
        };

});

html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

        <div class="dropdown category">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="entity"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Category <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown dropdown-submenu" ng-repeat="entity in entities"
                                            ng-click="getEnt()"><a href="#" class="dropdown-toggle"
                                                                   data-toggle="dropdown">{{ entity }}</a>
                                            <ul class="dropdown-menu"
                                                aria-labelledby="ast1Domain">
                                                <li ng-repeat="domain in ast" ng-click="getDomain()">
                                                    <a href=""> {{domain.name}}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
  </body>

</html>

json

[
        {
          "name": "Demographics",
          "children": [
            {
              "name": "Study 1",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 2",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            }]
        },
         {
          "name": "Monopoly",
          "children": [
            {
              "name": "Study 1",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 2",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            }]
        },
         {
          "name": "World",
          "children": [
            {
              "name": "Study 1",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 2",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            },
             {
              "name": "Study 3",
              "ORIGIN": "Assigned"
            }]
        }
        ]

If you inspect the html, your sub menu is there, the css is hiding it :) — ajmajmajma
– ajmajmajma, Commented Apr 5, 2016 at 16:08
Those bootstrap dropdowns are built with 1 level in mind, so you need to customize instead of trying to re-use their class. — ajmajmajma
– ajmajmajma, Commented Apr 5, 2016 at 16:15

ajmajmajma · Accepted Answer · 2016-04-05 16:13:53Z

1

I don't know if this is an exactly what you want, but basically you are using the dropdown-menu class inside the dropdown-menu class, and bootstrap is not set up to handle this as far as I am aware. So You need to find or create some custom css to handle all of this. Here is an example - https://plnkr.co/edit/Rl4JtHlBqGgZyQ47dSPn?p=preview

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

making a custom class, dropdown-submenu for your purposes and applying css accordingly. You can change this into whatever you like!

answered Apr 5, 2016 at 16:13

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anton Over a year ago

wow, I even couldn't expect that I need customize my own submenu, thank for help. In your example data are loading after menu was closed, is it possible to set that menu will not closed after click on "Menu"??

ajmajmajma Over a year ago

No problem glad I could help. Yes you can customize all of that with css, check out this example for reference bootply.com/86684 . And here is a very good thread on your topic for more reference stackoverflow.com/questions/18023493/….

Collectives™ on Stack Overflow

ng-repeat dropdown submenu with output json file (done)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related