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="angular.js@1.4.x" 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"
}]
}
]
