Angularjs指令封装输入框下拉菜单的匹配

使用Angularjs指令可以封装一些通用的组件可以被不同的模块间共用。

在表单中我们习惯用一个对象去绑定所有的表项。

在上面的代码中我们定义了一个简单的指令，从指令中可以看出，这个指令的属性有两个，一个datas，一个value.

datas：为我们绑定的下拉数组，这个数组一般是通过后台请求获取的，形如

vm.action.selectOpts = ["1111111","111111222222","22222222","33333","44444","555555"];

value：为我们绑定的对象属性，在实际操作时，我们会将选择的值直接赋值给vm.cache.currentItem.location（这其实就是一个对象的属性）。

那我们大概知道我们需要封装什么样的指令了，他至少包含我们的两个属性。

angular.
        module('am.guest.manager')
        .directive('hamSelectSearch', hamSelectOptionsDirective);
    function hamSelectOptionsDirective() {
        return {
            restrict: 'AE', //attribute or element
            scope: {
                datas: '=',
                value: '='
            },
            template: ''
            // replace: true,
            link: function ($scope, elem, attr, ctrl) {
                
            }
        };
    }

那么我们接下来就需要去生成我们的输入框和下拉框的模板。我这里面有一些封装的样式和校验，这个不需要理会。

angular.
        module('am.guest.manager')
        .directive('hamSelectSearch', hamSelectOptionsDirective);
    function hamSelectOptionsDirective() {
        return {
            restrict: 'AE', //attribute or element
            scope: {
                datas: '=',
                value: '='
                //bindAttr: '='
            },
            template: '' +
            '
' +
            ' ' +
            '  {{data}}' +
            ' ' +
            '
',
            // replace: true,
            link: function ($scope, elem, attr, ctrl) {
                
            }
        };
    }

我们知道封装的指令在模板中定义的事件我们需要单独去处理，那我我们可以使用其link方法来实现。

不过需要一点逻辑处理才能将我们的应用跑起来。

当用户输入的时候我们除了去后台获取数据(当然你也可以在其他的位置处理数据的问题)之外，还需要将隐藏的下拉框显示出来，同时根据用户输入的值进行模糊匹配，匹配出符合规则的数据。当用户删除时，我们需要做特殊的处理，就是输入值为空则显示全部的数据信息。

angular.
        module('am.guest.manager')
        .directive('hamSelectSearch', hamSelectOptionsDirective);
    function hamSelectOptionsDirective() {
        return {
            restrict: 'AE', //attribute or element
            scope: {
                datas: '=',
                value: '='
                //bindAttr: '='
            },
            template: '' +
            '
' +
            ' ' +
            '  {{data}}' +
            ' ' +
            '
',
            // replace: true,
            link: function ($scope, elem, attr, ctrl) {
                $scope.tempdatas = $scope.datas; //a temp array to store the datas
                $scope.hidden = true;//show ot hide the select
                $scope.value = '';//the data user input
                //set the value of selected value to input
                $scope.change = function (x) {
                    console.log("x",x);
                    $scope.value = x[0];
                    $scope.hidden = true;
                }
                //compare the input value to data array.If the temp array contains the input value . put it to newData and set it to $scope.datas
                //If no compare , will set the $scope.datas = $scope.tempdatas
                $scope.changeKeyValue = function (v) {
                    var newData = []; //temp array
                    angular.forEach($scope.tempdatas, function (data, index, array) {
                        if (data.indexOf(v) >= 0) {
                            newData.unshift(data);
                        }
                    });
                    //replace the temp to resource array
                    $scope.datas = newData;
                    //下拉选展示
                    $scope.hidden = false;
                    //if input value is null , reset the $scope.datas
                    if ('' == v) {
                        $scope.datas = $scope.tempdatas;
                    }
                    console.log($scope.datas);
                }
            }
        };
    }

那么我们在使用时就可以展现出想要的效果。

看一下值有没有正常赋值成功