Ui-select with tree navigation

Developer
Chris Hanson
Size
5,321 Kb
Views
85,008
  1. Ui-select with tree navigation Previews
  2. Ui-select with tree navigation HTML Codes
  3. Ui-select with tree navigation CSS Codes
  4. Ui-select with tree navigation JS Codes

How do I make an ui-select with tree navigation?

Extension of angular ui-select to support nested options. Doesn't require any changes to uiSelect code, just an overridden template. I've only make the changes for the selectize theme, but it should be pretty easy to add to the other themes as well.. What is a ui-select with tree navigation? How do you make a ui-select with tree navigation? This script and codes were developed by Chris Hanson on 29 September 2022, Thursday.

Ui-select with tree navigation Previews
IQ Test

Ui-select with tree navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ui-select with tree navigation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.1/select.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ main { margin: 80px auto; width: 300px;
}
.ui-select-choices-row { transition: background 0.1s ease, color 0.1s ease; background: #fff; color: #0099ff;
}
.ui-select-choices-row:hover { background: #007acc !important; color: #fff;
}
.option.ui-select-choices-row-inner { padding: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.option.ui-select-choices-row-inner div { padding: 6px 12px; position: relative;
}
.selectize-dropdown { margin-top: -3px; overflow: hidden;
}
.selectize-dropdown-content { overflow-x: auto;
}
.selectize-dropdown.group-tree .goto-child-group { background: none; border: none; box-shadow: none; color: rgba(0, 0, 0, 0.5); height: 100%; line-height: 1; margin: 0; padding: 8px; position: absolute; right: 0; text-shadow: none; top: 0; transition: background .2s;
}
.selectize-dropdown.group-tree .goto-child-group:hover { box-shadow: none; background: rgba(0, 0, 0, 0.1); border: none; color: #fff;
}
.selectize-dropdown.group-tree .ui-select-breadcrumbs { padding: 6px 12px; margin: 0; background: rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.selectize-dropdown.group-tree .ui-breadcrumb { color: white; cursor: pointer; font-size: 12px;
}
.selectize-dropdown.group-tree .ui-breadcrumb:hover { color: #ff9000;
}
.selectize-dropdown.group-tree .ui-breadcrumb:after { content: '>';
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child { color: white; cursor: default;
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child:after { content: ' ';
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main ng-app="app" ng-init="model = {}"> <ui-tree-select model="model"> </ui-tree-select> <pre>Model: {{ model | json }}</pre> <script type="text/ng-template" id="/ui-tree-select.html"> <ui-select ng-model="model.$selected" ui-select-focuser theme="selectize"> <ui-select-match placeholder="Select a group"> {{ $select.selected.title }} </ui-select-match> <ui-select-choices repeat="group in groups | filter: $select.search"> <div> <span ng-bind-html="group.title | highlight: $select.search"></span> <span ng-bind-html="'('+group.size+' users)'"></span> <a href ng-show="group.parent" class="goto-child-group" ng-click="loadChildGroupsOf(group, $select)"> <i class="fa fa-angle-right"></i> </a> </div> </ui-select-choices> </ui-select> </script>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.1/select.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ui-select with tree navigation - Script Codes CSS Codes

main { margin: 80px auto; width: 300px;
}
.ui-select-choices-row { transition: background 0.1s ease, color 0.1s ease; background: #fff; color: #0099ff;
}
.ui-select-choices-row:hover { background: #007acc !important; color: #fff;
}
.option.ui-select-choices-row-inner { padding: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.option.ui-select-choices-row-inner div { padding: 6px 12px; position: relative;
}
.selectize-dropdown { margin-top: -3px; overflow: hidden;
}
.selectize-dropdown-content { overflow-x: auto;
}
.selectize-dropdown.group-tree .goto-child-group { background: none; border: none; box-shadow: none; color: rgba(0, 0, 0, 0.5); height: 100%; line-height: 1; margin: 0; padding: 8px; position: absolute; right: 0; text-shadow: none; top: 0; transition: background .2s;
}
.selectize-dropdown.group-tree .goto-child-group:hover { box-shadow: none; background: rgba(0, 0, 0, 0.1); border: none; color: #fff;
}
.selectize-dropdown.group-tree .ui-select-breadcrumbs { padding: 6px 12px; margin: 0; background: rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.selectize-dropdown.group-tree .ui-breadcrumb { color: white; cursor: pointer; font-size: 12px;
}
.selectize-dropdown.group-tree .ui-breadcrumb:hover { color: #ff9000;
}
.selectize-dropdown.group-tree .ui-breadcrumb:after { content: '>';
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child { color: white; cursor: default;
}
.selectize-dropdown.group-tree .ui-breadcrumb:last-child:after { content: ' ';
}

Ui-select with tree navigation - Script Codes JS Codes

angular.module('app', ['ui.select', 'ngSanitize'])
.directive('uiTreeSelect', [ 'groupFactory', '$timeout', function (groupFactory, $timeout) { return { restrict: 'E', scope: { model: '=' }, link: function (scope, el) { scope.breadcrumbs = [{"id":0,"title":"All"}]; scope.groups = groupFactory.load(0); scope.loadChildGroupsOf = function(group, $select) { $select.search = ''; scope.breadcrumbs.push(group); scope.groups = groupFactory.load(group.id); scope.$broadcast('uiSelectFocus'); }; scope.navigateBackTo = function (crumb, $select) { $select.search = ''; var index = _.findIndex(scope.breadcrumbs, {id: crumb.id}); scope.breadcrumbs.splice(index + 1, scope.breadcrumbs.length); scope.groups = groupFactory.load(_.last(scope.breadcrumbs).id); $select.open = false; scope.$broadcast('uiSelectFocus'); }; }, templateUrl: '/ui-tree-select.html' }; }
])
// Couldn't get on-focus to work, so wrote my own
.directive('uiSelectFocuser', function ($timeout) { return { restrict: 'A', require: '^uiSelect', link: function (scope, elem, attrs, uiSelect) { scope.$on('uiSelectFocus', function () { $timeout(uiSelect.activate); }); } };
})
.factory('groupFactory', [ function () { var data = { 0: [{"id":1,"title":"Tazzy","size":"57","parent":true}, {"id":2,"title":"Skimia","size":"67","parent":true}, {"id":3,"title":"Edgetag","size":"32539","parent":true}, {"id":4,"title":"Topicware","size":"898","parent":false}, {"id":5,"title":"Ailane","size":"83","parent":false}, {"id":6,"title":"Chatterbridge","size":"084","parent":false}, {"id":7,"title":"Wordtune","size":"8647","parent":false}, {"id":8,"title":"Demimbu","size":"2255","parent":false}, {"id":9,"title":"Plajo","size":"9466","parent":true}, {"id":10,"title":"Skynoodle","size":"0","parent":true}], 1: [{"id":21,"title":"Plajo","size":"1","parent":true}, {"id":22,"title":"Kwilith","size":"2071","parent":false}, {"id":23,"title":"Mydeo","size":"306","parent":false}, {"id":24,"title":"Jaxbean","size":"5","parent":false}, {"id":25,"title":"Photojam","size":"54","parent":false}], 2: [{"id":31,"title":"Blogtag","size":"97084","parent":false}, {"id":32,"title":"Browsetype","size":"06","parent":false}, {"id":33,"title":"Voonte","size":"9","parent":false}, {"id":34,"title":"Omba","size":"71","parent":false}, {"id":35,"title":"Kwilith","size":"2","parent":false}], 3: [{"id":41,"title":"Yodo","size":"2","parent":false}, {"id":42,"title":"Aibox","size":"2152","parent":false}, {"id":43,"title":"Jetwire","size":"8858","parent":false}, {"id":44,"title":"Eabox","size":"5","parent":false}, {"id":45,"title":"Camimbo","size":"36236","parent":false}], 9: [{"id":51,"title":"Feedbug","size":"28933","parent":false}, {"id":52,"title":"Aimbu","size":"09711","parent":false}, {"id":53,"title":"Avavee","size":"12","parent":false}, {"id":54,"title":"Eare","size":"8","parent":false}, {"id":55,"title":"Wikivu","size":"3","parent":false}], 10: [{"id":61,"title":"Tagpad","size":"46","parent":false}, {"id":62,"title":"Kamba","size":"4","parent":false}, {"id":63,"title":"Eimbee","size":"26669","parent":false}, {"id":64,"title":"Twitterlist","size":"95538","parent":false}, {"id":65,"title":"Rhycero","size":"05","parent":false}], 21: [{"id":71,"title":"Cogibox","size":"47","parent":false}, {"id":72,"title":"Dablist","size":"5","parent":false}] }; return { load: function (id) { return data[id]; } } }
])
.run(['$templateCache', function ($templateCache) { // Overrides selectize template for group select tree. $templateCache.put('selectize/choices.tpl.html', [ '<div ng-show="$select.open"', ' class="ui-select-choices group-tree selectize-dropdown single">', ' <div ng-show="breadcrumbs.length > 1" class="ui-select-breadcrumbs">', ' <span class="ui-breadcrumb" ng-repeat="crumb in breadcrumbs"', ' ng-click="navigateBackTo(crumb, $select)">', ' {{crumb.title}}', ' </span>', ' </div>', ' <div class="ui-select-choices-content selectize-dropdown-content">', ' <div class="ui-select-choices-group optgroup">', ' <div ng-show="$select.isGrouped"', ' class="ui-select-choices-group-label optgroup-header">', ' {{$group}}', ' </div>', ' <div class="ui-select-choices-row">', ' <div class="option ui-select-choices-row-inner"', ' data-selectable="">', ' </div>', ' </div>', ' </div>', ' </div>', '</div>' ].join(''));
}])
Ui-select with tree navigation - Script Codes
Ui-select with tree navigation - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded September 29, 2022
Rating 4
Size 5,321 Kb
Views 85,008
Do you need developer help for Ui-select with tree navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Hanson (chrishanson) Script Codes
Name
Css spinner
Uiselect ie8 issues
Rotating 3d cube
Lf layout
Hello World
Nested rotating shapes
A Pen by Chris Hanson
Fireworks
Alternating rotating shaps
Search bar
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!