angular过滤下拉列表，与select2效果类似

一、angular下拉框-ui-select

我曾经写的一个指令，效果如图

	
	<ui-select ng-model="cityObj.city" theme="selectize"  ng-change="changeCityFunction()"  name="cityFullName" ng-disabled="isDisabled"> 
		<ui-select-match placeholder="请选择">{{$select.selected.jiupiCityFullName}}</ui-select-match>
		<ui-select-choices repeat="item in allCityList | filter: {jiupiCityFullName:$select.search}">
			<div ng-bind-html="item.jiupiCityFullName | highlight: $select.search"></div>
		</ui-select-choices>
   </ui-select>

 

(function () {
	'use strict';
	
	var jiupiCityFullNameModule = angular.module("jiupiCityFullNameModule",[]);
	jiupiCityFullNameModule.directive("jiupiCityFullNameSelect",[function(){
		return {
			restrict:'E',
			scope:{
				cityObj : "=",
				isRequired:'=',
				isDisabled:'=',
				isHideSelect : '=',
				changeCityFunction :'=',
			},
			templateUrl:"../static/jiupiCityFullNameSelect/jiupiCityFullNameSelect.html",
			controller:["$scope","$http",function($scope,$http){
				
				$scope.getCityList = function(){
					$http.get('bizwebcontrol/jiupicityfullname/findAllJiupiCityList').success(function(data){
		        		if(data.result=="success"){
		        			$scope.allCityList = data.list;
		        			if(!$scope.isHideSelect){
		        				$scope.allCityList.unshift({"id":"","jiupiCityFullName":"请选择"});
		        			}
		        			//默认选中
		        			if($scope.cityObj && $scope.cityObj.city && $scope.cityObj.city.id){
		        				angular.forEach($scope.allCityList,function(item){
			        				if(item.id ==  $scope.cityObj.city.id){
			        					$scope.cityObj.city = item ;
			        				}
			        			})
		        			}
		        		}
		        	})
				};
				$scope.getCityList();
				
			}]
		}
	}])
}());

 

二、layui,angular:

 

layui-select指令效果如下

在输入框中输入匹配下拉列表的数据，点击关闭按钮关闭下拉框

关键代码，

1、首先引入angular.js(1.x)和angular-sanitize.js文件

2、在主module中注入ngSanitize，var app = angular.module("myApp", ['ngSanitize']);

 

scriptApp.filter("highlight", function($sce, $log){
    var fn = function(text, search){
        if (!search) {
            return $sce.trustAsHtml(text);
        }
        text = encodeURI(text);
        search = encodeURI(search);

        var regex = new RegExp(search, 'gi')
        var result = text.replace(regex, '<span class="highlightedText">$&</span>');
        result = decodeURI(result);
        return $sce.trustAsHtml(result);
    };
    return fn;
})
    .directive('layuiSelect',function () {
        return {
            restrict: 'AE',
            replace: true,
            template:'<div class="layui-input-block layui-unselect layui-form-select layui-form-selected">\n' +
            '            <span class="deleteClass" data-ng-click="deleteList()"><i class="layui-icon">&#x1007;</i></span>' +
            '<input type="text" ng-model="inputName" id="inputClass" placeholder="请输入" class="layui-input"/>\n' +
            '            <dl class="layui-anim layui-anim-upbit" style="">\n' +
            '                <dd lay-value="" ng-repeat="item in microList | filter:inputName" data-ng-click="clickSelect(item)">' +
            '<div ng-bind-html="item[keyName] | highlight: inputName"></div> </dd>\n' +
            '            </dl>\n' +
            '        </div>',
            scope:{
                voList:'=',//列表数据
                 keyName:'@',//
                triFun:'&',
                chooseItem:'=',//选择的item
            },
            controller:function ($scope) {
                $scope.keyName = $scope.keyName?$scope.keyName:'name';

                $scope.microList = $scope.voList;
                $(document).click(function () {
                    $('.layui-form-selected dl').hide();
                });

                $('.layui-form-selected dl').hide();
                $('.deleteClass').hide();

                //下拉框点击选择
                $scope.clickSelect = function(item) {
                    $scope.inputName = item[$scope.keyName];
                    $scope.chooseItem = item;
                    $('.layui-form-selected dl').hide();
                    $('.deleteClass').show();
                };


                // 点击输入框
                $('#inputClass').click(function (e) {
                    event.stopPropagation();//阻止事件冒泡
                    $('.layui-form-selected dl').show();
                });

                // 点击图标删除
                $scope.deleteList = function () {
                    $scope.inputName = '';
                    // $('.deleteClass').hide();
                    $('.layui-form-selected dl').show();
                };

                //监听inputName
                $scope.$watch('inputName',function (newValue,oldValue) {
                    if(!newValue){
                        $('.deleteClass').hide();
                    }else{
                        $('.deleteClass').show();
                    }
                });

                //回调返回选择的对象
                $scope.$watch('chooseItem',function (newValue,oldValue) {
                    if(newValue != oldValue){
                        $scope.triFun();
                    }
                })
            }
        }
    })

 

相关css样式（仅供参考）

 

 

.deleteClass{
    position: absolute;
    right:0;
    top:7px;
    cursor: pointer;
}
.deleteClass .layui-icon{
    font-size:26px;
    color: #929090;
}
.highlightedText{
    font-weight: 600;
}

 

使用指令

 

 

<div class="layui-form-item" style="width:60%;">
    <label class="layui-form-label">选择版本号</label>
    <layui-select ng-if="vo.dataModalList" vo-list="vo.microList" key-name="name" 
                  tri-fun="triFun()" choose-item="vo.chooseItem"></layui-select>
</div>

其中voList，keyName,传入对应数组的值

 

$scope.vo.dataModalList=[
    {key:0,value:'zzz'},
    {key:1,value:'zxc'},
    {key:2,value:'zdf'},
    {key:3,value:'aaa'}
];

//下拉列表选择后触发
$scope.triFun=function () {
    console.log($scope.vo.chooseItem);//打印的是选择的item
}