javascript - 具有搜索和 Treeview 功能的 AngularJS 下拉列表

Question

我需要在下面创建一个控件或指令(请参见图片)。该指令有一个下拉列表，当您单击下拉列表时，它将显示搜索框和 Treeview 。当您单击 Treeview 中的项目时，该值应显示在下拉列表中。当您在文本框中输入值时，数据应使用匹配值过滤 Treeview ，如果数据在层次结构下匹配，它将显示层次结构。例如，如果您搜索选项 1.1.1，结果应为选项 1 > 选项 1.1 > 选项 1.1.1。

这是我正在处理的当前实现，到目前为止我从 github https://plnkr.co/edit/gmv0aUiBUMnOlvxzFdRt?p=preview 复制它不起作用

其他解决方案，如使用 angularjs 的 Kendo ，它具有我正在寻找的相同功能是可以接受的。

演示.controller.js

/**
 * Created by Shripad on 2015-Nov-17.
 */

angular.module('App',['tree.dropdown']).controller('treeDropdownCtrl', treeDropdownCtrl);

function treeDropdownCtrl() {
    var ctrl = this;

    ctrl.treeData = [
        {
            "id": 1,
            "name": "Option 1",
            "children": [
                {
                    "id": 2,
                    "name": "Option 1.1",
                    "children": [
                        {
                            "id": 3,
                            "name": "Option 1.1.1",
                        },
                        {
                            "id": 4,
                            "name": "Option 1.1.2",
                        }
                    ]
                }
            ]
        },
        {
            "id": 5,
            "name": "Option 2",
            "children": [
                {
                    "id": 6,
                    "name": "Option 2.1",
                    "children": [
                        {
                            "id": 7,
                            "name": "Option 2.1.1",
                        },
                        {
                            "id": 8,
                            "name": "Option 2.1.2",
                        }
                    ]
                }
            ]
        }
    ]

    // Set default selected...
    ctrl.selected = ctrl.treeData[0];


    ctrl.update = function (){
        ctrl.treeData = [
            {
                "id": 1,
                "name": "Level 1",
            },
            {
                "id": 5,
                "name": "Level 2",
            }
        ]
        ctrl.selected = ctrl.treeData[0];
    }
}

tree-dropdown.js

/**
 * Created by Shripad on 2015-Nov-17.
 */

angular.module('tree.dropdown', []).directive('treeDropdown', treeDropdown);

treeDropdown.$inject = ['$compile'];

function treeDropdown($compile){
    var template = "<div class='select' ng-click='openTree()'><p>{{selected.name}}</p></div>";
    template += "<div class='list' ng-show='isOpen'></div>";

    return {
        restrict: 'E',
        scope: {
            data: '=',
            selected: '='
        },

        template: template,
        controller: function($scope, $element){
            ctrl = $scope;
            ctrl.isOpen = false;

            ctrl.openTree = function(){
                ctrl.isOpen = ctrl.isOpen? false:true;
            }

            ctrl.childClick = function(obj){
                setSelected(ctrl, obj);
                ctrl.isOpen = false;
                ctrl.$apply();
            }
        },
        link: function(scope, element, attrs, ngModel) {
            var list =  angular.element(element[0].querySelector('.list'));

            scope.$watchGroup(['data', 'selected'], function(newValues, oldValues, scope) {
                list.html('');
                list.append("<li><input type='text' placeholder='Query' ng-model='query'/></li>");
                if(!scope.selected){
                    setSelected (scope, null);
                }
                var options = getOptions(scope, scope.data, 0);
                list.append($compile(options)(scope));
            });

            // Close on click outside the dropdown...            
            angular.element(document).bind('click', function(event){
                if (element !== event.target && !element[0].contains(event.target)) {
                    scope.$apply(function(){
                        scope.isOpen = false;
                    })
                }
            });
        }
    };

    function getOptions(scope, data, level){

        var optionUL = angular.element("<ul></ul>");


        angular.forEach(data, function(obj){
            var optionLI = angular.element("<li></li>");
            var optionA = angular.element("<p ng-class='{selected:selected.id=="+obj.id+"}' class='level-"+level+"'>"+obj.name+"</p>");
            optionLI.append(optionA);

            // Set selected option if selected id or object exist..
            if(scope.selected==obj){
                setSelected (scope, obj);
            }

            optionA.bind("click", function(){
                scope.childClick(obj);
            })

            if(obj.children){
                optionLI.append(getOptions(scope, obj.children, level+1));
            }
            optionUL.append(optionLI);
        })

        return optionUL;
    }

    function setSelected(scope, obj){
        if(obj){
            scope.selected = obj;
        } else {
            scope.selected = null;
        }
    }
}

树下拉列表.css

body {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tree-dropdown {
   position: relative;
   display: block;
   font-size: 13px;
   width: 300px;
}

.tree-dropdown .select {
   padding: 0 10px;
   height: 32px;
   display: block;
   line-height: 14px;
   color: #333333;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #cccccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.tree-dropdown .select::after {
   content: " ";
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid #CDCDCD;
   position: absolute;
   right: 10px;
   top: 13px;
}

.tree-dropdown p {
   line-height: 32px;
   margin: 0;
}

.tree-dropdown .list{
   box-sizing: content-box;
   position: absolute;
   top: 33px;
   left: 0px;
   right: 0px;
   background-color: #FFF;
   border-style: solid;
   border-color: #cccccc;
   border-width: 1px 1px 1px 1px;
   z-index: 1100;
   overflow-x: hidden;
   max-height: 300px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.tree-dropdown ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

.tree-dropdown ul:first-child { 
   padding: 0px;
}

.tree-dropdown .list p:hover{
   background: #eee;
}

.tree-dropdown .list p.selected{
   background: #DDDBFF;
}

.tree-dropdown .level-0 {
   padding-left: 15px
}
.tree-dropdown .level-1 {
   padding-left: 30px
}
.tree-dropdown .level-2 {
   padding-left: 45px
}
.tree-dropdown .level-3 {
   padding-left: 60px
}
.tree-dropdown .level-4 {
   padding-left: 75px
}
.tree-dropdown .level-5 {
   padding-left: 90px
}
.tree-dropdown .level-6 {
   padding-left: 105px
}
.tree-dropdown .level-7 {
   padding-left: 120px
}
.tree-dropdown .level-8 {
   padding-left: 135px
}
.tree-dropdown .level-9 {
   padding-left: 150px
}
.tree-dropdown .level-10 {
   padding-left: 110px
}

索引.html

<!DOCTYPE html>
<html ng-app="App">

  <head lang="en">
    <meta charset="UTF-8" />
    <title>Demo angular-tree-dropdown</title>
    <link rel="stylesheet" href="tree-dropdown.css" />
    <script src="angular.min.js"></script>
    <script src="demo.controller.js"></script>
    <script src="tree-dropdown.js"></script>
    <style type="text/css">
    .col-xs-6 {
        display: inline-block;
        width: 49%;
    }
    label {
        margin-left: 10px;
    }
    </style>
  </head>

  <body>
    <h2>Demo angular-tree-dropdown</h2>
    <div class="row" ng-controller="treeDropdownCtrl as ctrl">
      <div class="col-xs-6">
        <tree-dropdown class="tree-dropdown" data="ctrl.treeData" selected="ctrl.selected"></tree-dropdown>
      </div>
      <div class="col-xs-6">
        <button ng-click="ctrl.update()">Update Data Array</button>
        <button ng-click="ctrl.selected=ctrl.treeData[1]">Select by Object</button>
        <label>Selected Id: {{ctrl.selected.id}}</label>
      </div>
    </div>
  </body>

</html>

Answer 1

在最新版本的 Kendo UI (R2 2018) 中有一个名为 DropDownTree 的新小部件，它似乎正是您正在寻找的。 Here 是演示页面。