I've found this tree select on codepen.io (see link below) and I would like to use the selected value's ID in another function but I'm unable to properly get it. For example, the ID of the selected value "Tazzy" is "1"(again, see link below). I've tried using ng-controller but the select box disappears when I do that and I have no idea why.
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ui-select with tree navigation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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>
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>
<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>
Javascript:
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'
};
}
])
.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) {
$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(''));
}])
Basically, my program needs the selected ID to open another html window. I already have the proper javascript function, I just need to properly link the selected value to that function, by using its ID. Before that, I used a simple select tag and document.getElementById options but since I switched to this tree select menu, I'm a bit clueless as I'm really not familiar with angular.
Thanks!