var app = angular.module('plunker', []);
app.filter('toArray', function(){
// See http://stackoverflow.com/questions/14955146/how-to-sort-object-data-source-in-ng-repeat-in-angularjs
// usage <option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>
return function(obj) {
var result = [];
angular.forEach(obj, function(val, key) {
result.push(val);
});
return result;
};
});
app.controller('MainCtrl', function($scope) {
$scope.data =
[
{
"name": "level1 opt1",
"select": false,
"items": [
{
"name": "level2 opt1",
"items": [
{
"name": "level3 opt1", "select": true,
},
{
"name": "level3 opt2", "select": true,
},
{
"name": "level4 opt3", "select": true,
}
]
},
{
"name": "level2 opt2", "select": true,
"items": [
{
"name": "level3 opt4", "select": true,
},
{
"name": "level3 opt5", "select": true,
},
{
"name": "level4 opt6", "select": true,
}
]
},
{
"name": "level2 opt3", "select": true,
}
]
},
{
"name": "level1 opt3", "select": false
},
{
"name": "level1 opt4", "select": false
},
{
"name": "level1 opt5", "select": false
},
{
"name": "level1 opt6", "select": false
},
{
"name": "level1 opt7", "select": false
}
]
$scope.filterText = '';
$scope.selectedValue = null;
$scope.currentLevel = 0;
// Initialise the 2 first levels.
// Rem: The second level can be initialized as a blank placeholder - it is needed for the CSS3 transition to apply.
$scope.levels = [$scope.data, []]
// Initialize the classes for the two first levels.
$scope.classForLevel = ["parent-active", "child-inactive"];
$scope.selectValue = function(value){
$scope.selectedValue = value
}
$scope.drilldown = function(items){
if(items){
$scope.filterText = '';
// Current becomes an unactive parent (current depth)
$scope.classForLevel[$scope.currentLevel] = "parent-inactive";
// Increment drilldown level
$scope.currentLevel++;
// Add that child level
$scope.levels[$scope.currentLevel] = items;
// Target level becomes active (depth+1)
$scope.classForLevel[$scope.currentLevel] = "child-active";
// Prepare next level (depth+2)
$scope.levels.push([]);
$scope.classForLevel.push("child-inactive");
}
}
$scope.zoomOut = function(){
// Likely to be <= 0 if compile error occurs between chair and keyboard.
if($scope.currentLevel > 0){
$scope.filterText = '';
// Current becomes an unactive child (current depth)
$scope.classForLevel[$scope.currentLevel] = "child-inactive";
// Decrease drilldown level
$scope.currentLevel--;
// Target level becomes active (depth-1)
$scope.classForLevel[$scope.currentLevel] = "parent-active";
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<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.1/angular.js" data-semver="1.4.1"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<br />
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{selectedValue ? selectedValue + ' | ' : ''}}Level count: {{levels.length - 1}}</h2>
</div>
<div class="panel-body"
ng-init="
dropdownOpen = true;
showSubLevel = false">
<div class="dropdown" ng-init="">
<div
class="dropdown-toggle input-group dt-dropdown"
style="width:240px"
ng-click="isOpen =! isOpen"
data-toggle="dropdown">
<input type="text" class="form-control dd-filter"
placeholder="Filter"
ng-model="filterText.name"
ng-click="$event.preventDefault(); $event.stopPropagation();">
<span class="input-group-btn dd-btn">
<button class="btn btn-default"
type="button">
<span class="dd-label-closed">select a value <span class="caret"></span></span>
<span class="dd-label-open">close</span>
</button>
</span>
</div>
<div class="dropdown-menu dd-container" role="menu"
ng-init="height=128"
style="width:240px; height:{{(currentLevel ? 48 : 8) + levels[currentLevel].length * 32}}px">
<ul ng-repeat="level in levels track by $index"
ng-class="['page', classForLevel[$index], '' ]">
<!-- back -->
<div ng-if="$index > 0">
<li class="heading">
<a href="" ng-click="zoomOut(); $event.stopPropagation();" class="back"><span class="glyphicon glyphicon-chevron-left" style="font-size: 0.8em"></span> back</a>
</li>
<li ng-if="false" role="presentation" class="divider"></li>
</div>
<!-- entries -->
<li ng-repeat="entry in level | filter:filterText"
ng-class="[{selectable:entry.select},{drilldown:entry.items}]"
ng-click="drilldown(entry.items); $event.stopPropagation();">
<a ng-hide="!entry.select" href="" ng-click="selectValue(entry.name); $event.stopPropagation();" class="entry">{{entry.name}}</a>
<span ng-show="!entry.select" href="">{{entry.name}}</span>
<a href="" ng-if="entry.items" ng-click="drilldown(entry.items); $event.stopPropagation();" class="drilldown">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */
div.dropdown{}
div.dropdown button{
width: 100%;
}
div.dropdown .dd-filter{
width: 0px;
padding: 0px;
border: none;
-moz-transition: width 0s;
-webkit-transition: width 0s;
}
div.dropdown .dd-btn{
width: 100% !important;
}
div.dropdown:not(.open){}
div.dropdown:not(.open) button{
border-top-left-radius: 4px!important;
border-bottom-left-radius: 4px!important;
}
div.dropdown:not(.open) .dd-label-open{
display: none;
}
div.dropdown:not(.open) .dd-label-closed{
}
div.dropdown.open{}
div.dropdown.open input{
width: 160px!important;
-moz-transition: width 0.1s;
-webkit-transition: width 0.1s;
}
div.dropdown.open button{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
div.dropdown.open .dd-filter{
width: inherit;
padding: 6px 12px;
border: 1px solid #ccc;
}
div.dropdown.open .dd-btn{
}
div.dropdown.open .dd-label-open{
display: inherit;
}
div.dropdown.open .dd-label-closed{
display: none;
}
div.dd-container{
width: 100%;
position: absolute;
overflow: hidden;
padding: 2px 0px 0px 0px;
-moz-transition: height 0.5s ease-out 0.1s;
-webkit-transition: height 0.5s ease-out 0.1s;
}
div.dd-container ul{
height: 100%;
list-style: none;
padding: 5px 0;
margin: 2px 0 0;
}
div.dd-container ul.page{
position: absolute;
overflow: hidden;
padding: 0px;
}
ul.page.parent-inactive{
width: 0px;
left: -100%;
-moz-transition: left 1s, width 0.1s ease-out 1s;
-webkit-transition: left 1s, width 0.1s ease-out 1s;
}
ul.page.parent-active{
left: 0;
width: 100%;
-moz-transition: left 1s, width 0.1s;
-webkit-transition: left 1s, width 0.1s;
}
ul.page.child-inactive{
width: 0px;
left: 100%;
-moz-transition: left 1s, width 0.1s ease-out 1s;
-webkit-transition: left 1s,width 0.1s ease-out 1s;
}
ul.page.child-active{
left: 0;
width: 100%;
-moz-transition: left 1s, width 1s;
-webkit-transition: left 1s, width 1s ;
}
div.dd-container ul.page li:not(.divider){
/*padding: 4px 8px 4px 16px;*/
overflow: hidden;
white-space: nowrap;
height: 32px;
-moz-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
}
div.dd-container ul.page li:hover{
background-color: #FAFAFA;
}
div.dd-container ul.page li span:not(.glyphicon){
display: inline-block;
height: 100%;
vertical-align: middle;
padding: 6px 0px 0px 16px;
}
div.dd-container ul.page li a{
overflow: hidden;
white-space: nowrap;
/*color:inherit;*/
text-decoration: none;
display: inline-block;
height: 100%;
width: auto;
vertical-align: middle;
padding: 6px 0px 0px 16px;
}
div.dd-container ul.page li a:hover {
text-decoration: none;
}
div.dd-container ul.page li a.back{
width:100%;
}
div.dd-container ul.page li a.back:hover{
width:100%;
background-color: #F0F0F0;
}
div.dd-container ul.page li a.entry{
width: 160px;
}
div.dd-container ul.page li a.entry:hover{
background-color: #F0F0F0;
}
div.dd-container ul.page li:not(.drilldown) a.entry{
width: 100%;
}
div.dd-container ul.page li a.drilldown{
display: inline-block;
font-size: 0.8em;
width: 80px;
height: 32px;
text-align:center;
padding: 10px 0px 0px 0px;
position: absolute;
right: 0px;
color:#E0E0E0;
}
div.dd-container ul.page li.heading{
margin-bottom: 4px;
border-bottom: 1px solid #E0E0E0;
height: 34px;
}
div.dd-container ul.page li.selectable{}
div.dd-container ul.page li.selectable a.drilldown:hover{
color:inherit;
background-color: #F0F0F0;
}
div.dd-container ul.page li.selectable:hover a.drilldown{
border-left: 1px solid #DDD;
}
div.dd-container ul.page li.drilldown:not(.selectable){
cursor: pointer;
}
div.dd-container ul.page li.drilldown:hover:not(.selectable){
background-color: #F0F0F0;
}
div.dd-container ul.page li.drilldown:hover:not(.selectable) a{
color:inherit;
}
div.dd-container ul.page li.divider{
padding: 0px !important;
}