我正在尝试为下拉菜单设置子菜单，该子菜单应该来自输出json文件， this is plunker example ，第一级是从范围内的 json 对象生成，子菜单应该从 json 文件生成。在控制台中，我看到 Controller 看到我的 json 文件和里面的对象，但由于某种原因它没有渲染子菜单，我的错误在哪里？我很感激任何帮助。
我的代码:
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"
}]
}
]
最佳答案
我不知道这是否正是您想要的，但基本上您在 dropdown-menu 类中使用 dropdown-menu 类，并引导据我所知，还没有设置来处理这个问题。所以你需要找到或创建一些自定义CSS来处理所有这些。这是一个例子 - 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;
}
根据您的目的制作自定义类，dropdown-submenu并相应地应用CSS。您可以将其更改为您喜欢的任何内容!
关于javascript - 带有输出 json 文件的 ng-repeat 下拉子菜单(完成)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36431467/