itsm-pc-handle/assets/js/controllers/selectinput.js

app.directive('selectInput', function($compile) {
    return {
        restrict: 'AE', //attribute or element  
        // scope: {
        //     requesdata: '=',
        //     onChangeadd: '&'
        //         //bindAttr: '='  
        // },
        template: '<input type = "test" class="form-control" ng-change="changeKeyValue(searchField)" ng-model="searchField"' +
            'ng-click = "checkclick($event)" value="{{searchField}}"/></input>' +
            '<div ng-show="hidden&&myData.length>0" class="col-md-12">' +
            '   <select class="drowpdawn-select"  ng-change="change(x)" ng-model="x" multiple>' +
            '       <option ng-repeat="item in myData" class="drowpdawn-option" value={{item}}> {{item.account}}&nbsp&nbsp{{item.name}}&nbsp&nbsp{{item.gender}}&nbsp&nbsp{{item.areaDTO.area}}&nbsp&nbsp{{item.placeDTO.place}}</option>' +
            '   </select>' +
            '</div>',
        // replace: true,
        link: function($scope, elem, attr, ctrl) {
            // $scope.requesdata = ["key4", "xyz", "key3", "xxxx", "key2", "value2", "key1", "value1"];
            console.log($scope.myData);
            $scope.tempdatas = $scope.requesdata; //下拉框选项副本  
            $scope.hidden = false; //选择框是否隐藏  
            $scope.searchField = ''; //文本框数据 
            //将下拉选的数据值赋值给文本框  
            $scope.change = function(x) {
                    // $scope.searchField = JSON.parse(x[0]).account;
                    // $scope.requester = JSON.parse(x[0]);
                    $scope.getMydata(x);
                    $scope.hidden = false;
                }
                //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换  
            $scope.changeKeyValue = function(v) {
                $scope.refreshUseradd(v);
                var newDate = []; //临时下拉选副本  
                //如果包含就添加  
                angular.forEach($scope.requesdata, function(data, index, array) {
                    if (data.indexOf(v) >= 0) {
                        newDate.unshift(data);
                    }
                });
                //用下拉选副本替换原来的数据  
                $scope.requesdata = newDate;
                //下拉选展示  
                $scope.hidden = true;
                //如果不包含或者输入的是空字符串则用初始变量副本做替换  
                if ($scope.requesdata.length == 0 || '' == v) {
                    $scope.requesdata = $scope.tempdatas;
                }
                console.log($scope.requesdata);
            }
        },
        controller: [
            '$scope', '$document',
            function($scope, $document) {
                // $scope.changeKeyValue = function(v) {
                //     $scope.onChangeadd(v);
                //     var newDate = []; //临时下拉选副本  
                //     //如果包含就添加  
                //     angular.forEach($scope.requesdata, function(data, index, array) {
                //         if (data.indexOf(v) >= 0) {
                //             newDate.unshift(data);
                //         }
                //     });
                //     //用下拉选副本替换原来的数据  
                //     $scope.requesdata = newDate;
                //     //下拉选展示  
                //     $scope.hidden = false;
                //     //如果不包含或者输入的是空字符串则用初始变量副本做替换  
                //     if ($scope.requesdata.length == 0 || '' == v) {
                //         $scope.requesdata = $scope.tempdatas;
                //     }
                //     console.log($scope.requesdata);
                // }
                $scope.checkclick = function($event) {
                    if ($scope.hidden) {
                        $scope.hidden = ture;
                    } else {
                        $scope.hidden = true;
                    }
                    $event.stopPropagation();
                }
                $document.bind("click", function(event) {
                    $scope.hidden = false;
                    $scope.$apply();
                });

            }
        ],
    }
    // };
});