angular下拉框模糊查询

最新推荐文章于 2024-05-07 21:56:32 发布

zhifeng687

最新推荐文章于 2024-05-07 21:56:32 发布

阅读量4.1k

点赞数

分类专栏： angular.js

angular.js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

前两天研究了一下angularjs，不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。

写了个搜索下拉框的demo，注释在里边都写了，就不再这罗嗦了。

1普通方式实现

<!DOCTYPE html>  
<html>  
<head lang="zh_CN">  
<meta charset="utf-8">  
   <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>  
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
</head>  
<body >  
<div ng-app="myApp" ng-controller="myCtrl">  
    <input type = 'test' ng-change="changeKeyValue(searchField)" ng-model="searchField" style = 'display:block;width:200px' ng-click = 'hidden=!hidden' value="{{searchField}}"/></input>  
    <div  ng-hide="hidden">  
        <select style = 'width:200px' ng-change="change(x)" ng-model="x" multiple>  
            <option ng-repeat="data in datas" >{{data}}</option>  
        </select>  
    </div>  
</div>  
  
<div>  
<p><h1>angular输入选择框</h1></p>  
<p><h2>逻辑实现步骤</h2></p>  
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>  
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>  
<div>  
  
  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项  
    $scope.tempdatas = $scope.datas; //下拉框选项副本  
    $scope.hidden=true;//选择框是否隐藏  
    $scope.searchField='';//文本框数据  
    //将下拉选的数据值赋值给文本框  
    $scope.change=function(x){  
        $scope.searchField=x;  
        $scope.hidden=true;  
    }  
    //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换  
    $scope.changeKeyValue=function(v){  
          
        var newDate=[];  //临时下拉选副本  
        //如果包含就添加  
        angular.forEach($scope.datas ,function(data,index,array){  
            if(data.indexOf(v)>=0){  
                newDate.unshift(data);  
            }  
        });  
        //用下拉选副本替换原来的数据  
        $scope.datas=newDate;  
        //下拉选展示  
        $scope.hidden=false;  
        //如果不包含或者输入的是空字符串则用初始变量副本做替换  
        if($scope.datas.length==0 || ''==v){  
            $scope.datas=$scope.tempdatas;  
        }  
        console.log($scope.datas);  
    }  
});  
  
</script>  
</html>

指令方式实现

<!DOCTYPE html>  
<html>  
<head lang="zh_CN">  
<meta charset="utf-8">  
   <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>  
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
</head>  
<body >  
<div ng-app="myApp" ng-controller="myCtrl">  
    <div>  
        <select-search datas="datas"></select-search>  
    </div>  
      
</div>  
<div>  
<p><h1>angular输入选择框 自定义指令方式</h1></p>  
<p><h2>逻辑实现步骤</h2></p>  
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>  
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>  
<div>  
  
  
<script>  
  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
       $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项  
});  
app.directive('selectSearch', function($compile) {  
  return {  
    restrict: 'AE', //attribute or element  
    scope: {  
      datas: '=',  
     //bindAttr: '='  
    },  
    template:  
    '<input type = "test" ng-change="changeKeyValue(searchField)" ng-model="searchField" style = "display:block;width:200px" '+  
    'ng-click = "hidden=!hidden" value="{{searchField}}"/></input>'+  
    '<div  ng-hide="hidden">'+  
    '   <select style = "width:200px" ng-change="change(x)" ng-model="x" multiple>'+  
    '       <option ng-repeat="data in datas" >{{data}}</option>'+  
    '   </select>'+  
    '</div>',  
 //   replace: true,  
    link: function($scope, elem, attr, ctrl) {  
      
        $scope.tempdatas = $scope.datas; //下拉框选项副本  
        $scope.hidden=true;//选择框是否隐藏  
        $scope.searchField='';//文本框数据  
    //将下拉选的数据值赋值给文本框  
        $scope.change=function(x){  
            $scope.searchField=x;  
            $scope.hidden=true;  
        }  
    //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换  
        $scope.changeKeyValue=function(v){  
          
            var newDate=[];  //临时下拉选副本  
        //如果包含就添加  
            angular.forEach($scope.datas ,function(data,index,array){  
                if(data.indexOf(v)>=0){  
                    newDate.unshift(data);  
                }  
            });  
        //用下拉选副本替换原来的数据  
            $scope.datas=newDate;  
        //下拉选展示  
            $scope.hidden=false;  
        //如果不包含或者输入的是空字符串则用初始变量副本做替换  
            if($scope.datas.length==0 || ''==v){  
                $scope.datas=$scope.tempdatas;  
            }  
            console.log($scope.datas);  
        }  
    }  
  };  
});  
</script>  
</html>

最终效果如下：