angular下拉框搜索模糊匹配

最新推荐文章于 2019-03-27 10:26:48 发布

weixin_34146805

最新推荐文章于 2019-03-27 10:26:48 发布

阅读量759

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/jiangze-blog/p/7999791.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">
    <input type="text" style="width:300px;display: block;" ng-model="selectVague" ng-click="hidden=!hidden" ng-change="selectVagueChange(selectVague)">
    <select ngc-select-search style="width: 300px;" name="" id="" multiple ng-hide="hidden" ng-change="searchChange(selectData)" ng-model="selectData" ng-options="m.name for m in datas" ng-click="hidden=!hidden"></select>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,$http) {
        $scope.datas = [
            {id:"1",name:"dsadasdas"},
            {id:"2",name:"1111"},
            {id:"3",name:"222"},
            {id:"4",name:"eeee"},
            {id:"5",name:"ddddd"},
        ];
        $scope.tempdatas = $scope.datas;
        $scope.selectVague = "";
        $scope.hidden = true;
        /*input框发生变化时监听值*/
        $scope.selectVagueChange = function(val){
            console.log(val);
            var newArr= [];
            if(val){
                angular.forEach($scope.datas,function(item){
                    console.log(item.name);
                    if(item.name.indexOf(val)!= -1){
                        console.log(item);
                        newArr.push(item);
                    };
                });
                $scope.datas = newArr;
            }else{
                console.log($scope.tempdatas);
                $scope.datas = $scope.tempdatas;
            };
        };
        /*select触发监听值*/
        $scope.searchChange = function(v){
            console.log(v);
            $scope.selectVague = v[0].name;
        };


        //获取公司列表
        function companyList(){
            $http({
                method:"post",
                url:"url",
                params:{
                    token:"token",
                    curPage: 0,
                    pageSize: 50
                }
            }).success(function(data){
                $scope.datas = data.data.list;
                $scope.tempdatas = $scope.datas;
            })
        }
    });
</script>
</body>
</html>