1

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(''));
}])

link to: codepen.io

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!

Marianne
  • 11
  • 2
  • 1
    can you post your ui-select element at least? Pretty sure I can help if I see what you are currently trying. – Devin Fields Jun 14 '18 at 21:25
  • Welcome to StackOverflow. Please read [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Adrian W Jun 14 '18 at 21:38
  • normally you should be able to see the ui-select with the codeipen.io link. I just need to isolate the selected ID so when I click on some button, the correct ID is entered in the function. what I have is Sorry if it's not that clear, I'm not that experienced in this kind of stuff. – Marianne Jun 15 '18 at 14:36
  • I've edited so you can now see all the code that I found – Marianne Jun 19 '18 at 19:19

0 Answers0