angularjs--制作树形菜单
效果图
数据源
/* Controllers */
function ctrDataList($scope) {
$scope.ctrDataList_list = [
{
"title":"General",
"con":[{
"pid":"g1",
"head": "Users",
"body": [{"id":"gu-1","name":"Overview" }, { "id":"gu-2","name":"Add User" } ]
} ,
{
"pid":"g2",
"head": "Companies",
"body": [{"id":"gc-1","name":"Overview" }, { "id":"gc-2",",=name":"Add User" } ]
},
{
"pid":"g3",
"head": "Roles",
"body": [{"id":"gr-1","name":"Overview" }, { "id":"gr-2","name":"Add User" } ]
},
{
"pid":"g4",
"head": "Groups",
"body": [{"id":"gg-1","name":"Overview" }, { "id":"gg-2","name":"Add User" } ]
},
{
"pid":"g5",
"head": "Teams",
"body": [{"id":"gt-1","name":"Overview" }, { "id":"gt-2","name":"Add User" } ]
},
{
"pid":"g6",
"head": "Data",
"body": [{"id":"gd-1","name":"Overview" }, { "id":"gd-2","name":"Add User" } ]
},
{
"pid":"g7",
"head": "Templates",
"body": [{"id":"gtt-1","name":"Overview" }, { "id":"gtt-2","name":"Add User" } ]
} ,
{
"pid":"g8",
"head": "access log",
"body": [{"id":"ga-1","name":"Overview" }, { "id":"ga-2","name":"Add User" } ]
},
{
"pid":"g9",
"head": "Reports",
"body": [{"id":"1gr-1","name":"Overview" }, { "id":"gr-2","name":"Add User" } ]
}
]
},
{
"title":"System",
"con":[{
"pid":"s1",
"head": "System Settings",
"body": [{"id":"ss-1","name":"Overview" }, { "id":"ss-2","name":"Add User" } ]
} ,
{
"pid":"s2",
"head": "access log",
"body": [{"id":"sa-1","name":"Overview" }, { "id":"sa-2","name":"Add User" } ]
},
{
"pid":"s3",
"head": "modules",
"body": [{"id":"sm-1","name":"Overview" }, { "id":"sm-2","name":"Add User" } ]
},
{
"pid":"s4",
"head": "access log",
"body": [{"id":"saa-1","name":"Overview" }, { "id":"saa-2","name":"Add User" } ]
}
]
}
];
}
<div class="row settingBox">
<div class="col-md-3 maxW300" ng-controller="ctrDataList" >
<h1><a href="#/setting_home" id="setting">settings</a>
</h1>
<div class="panel-group settingBox_left bor_bottom " id="accordion" ng-repeat="i in ctrDataList_list ">
<h2> {{i.title}} </h2>
<div class="panel panel-default " ng-repeat="j in i.con">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse{{j.pid}}">
{{j.head}}
</a>
</h4>
</div>
<div id="collapse{{j.pid}}" class="panel-collapse collapse ">
<div class="panel-body" ng-if="j.body.length>0">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in j.body">
<a href="#/setting_table/{{item.id}}">{{item.name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 settingBox_right" >
<p class="h1"> what can we help you with today?</p>
<section ng-view >
</section>
</div>
</div>
index.html
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-title" content="Smartflow" />
<title>index</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css" /> <!--
<link rel="shortcut icon" href="favicon.ico" /> -->
<link rel="stylesheet" href="/app/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/app/lib/Font-Awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/app/css/global.css"/>
<link rel="stylesheet" href="/app/css/table.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="lib/jquery/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
-->
</head>
<body >
<section ng-cloak ng-include=" 'setting/setting.html' ">
</section>
<script src="/app/lib/angular/angular.js"></script>
<script src="/app/lib/jquery/jquery-1.11.1.min.js"></script>
<script src="/app/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/services.js"></script>
<script src="/app/js/controllers.js"></script>
<script src="/app/js/filters.js"></script>
<script src="/app/js/directives.js"></script>
<script src="/app/js/main.js"></script>
</body>
</html>