angularJS实现可编辑的下拉框

将angularJS与插件select2结合使用即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="bootstrap.min.css" />
   <link rel="stylesheet" href="select2.css" />
    <link rel="stylesheet" href="select2-bootstrap.css" />
   <script type="text/javascript" src="jquery.1.11.1.js"></script>
   <script type="text/javascript" src="angular.1.2.10.min.js"></script>
   <script type="text/javascript" src="select2.min.js"></script>
        <title>Title</title>

</head>
<body ng-app="demo" ng-controller="app">
<div class="col-sm-offset-2 col-sm-6">
<select select2 ng-model="search" ng-options="a for a in na"   style="width:200px"></select>
<select select2 ng-model="search1" ng-options="name['网址'] for name in names track by $index|filter:search" style="width:200px"></select>
<input select2 ng-model="search" select2-model="aS2" config="config1" type="text" class="form-control">
</div>
</body>
<script type="text/javascript">

   var app=angular.module("demo",[]);
   app.controller('app',['$scope',function($scope){
     // $scope.names=["小王","小明","小张","鹏鹏","大叔","张珊","李四"];//select标签的数据可谓对象也可以为数组
       $scope.names=[
    {"网址" : "Google", url : "a.html"},//当这边是中文时注意使用name['网址']，当不是中文时直接用name.字段名就好即分别为对象的两种取值方式，对象引用时前一种方式更为常见
    {"网址" : "Runoob", url : "b.html"},
    {"网址" : "Taobao", url : "c.html"}
]
               //console.log(typeof $scope.names);
       $scope.na=['白','大','李'];

        $scope.config1 = {
        data: [],
        placeholder: '尚无数据'
    };
   $scope.config1.data = [{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]//用input形式数据的形式必须为中种结构,不然会报错
   }])
   app.directive('select2', function () {
    return {
        restrict: 'A',
        scope: {
            config: '=',
            ngModel: '=',
            select2Model: '='
        },
        link: function (scope, element, attrs) {
            // 初始化
            var tagName = element[0].tagName,
                config = {
                    allowClear: true,
                    multiple: !!attrs.multiple,
                    placeholder: attrs.placeholder || ' '   // 修复不出现删除按钮的情况
                };

            // 生成select
            if(tagName === 'SELECT') {
                // 初始化
                var $element = $(element);
                delete config.multiple;

                $element
                    .prepend('<option value="" ng-if="false"></option>')//避免出现空的选项
                    .val('')
                    .select2(config);

                // model - view
                scope.$watch('ngModel', function (newVal) {

                    setTimeout(function () {
                        $element.find('[value^="?"]').remove();    // 清除错误的数据

                    },0);
                }, true);
                return false;
            }
   // 处理input
           if(tagName === 'INPUT') {
                // 初始化
                var $element = $(element);

                // 获取内置配置
                if(attrs.query) {
                    scope.config = select2Query[attrs.query]();
                }

                // 动态生成select2
                scope.$watch('config', function () {
                    angular.extend(config, scope.config);
                    $element.select2('destroy').select2(config);
                }, true);

                // view - model
                $element.on('change', function () {
                    scope.$apply(function () {
                        scope.select2Model = $element.select2('data');
                    });
                });

                // model - view
                scope.$watch('select2Model', function (newVal) {
                    $element.select2('data', newVal);
                }, true);

                // model - view
                scope.$watch('ngModel', function (newVal) {
                    // 跳过ajax方式以及多选情况
                    if(config.ajax || config.multiple) { return false }

                   // $element.select2('val', newVal);
                }, true);
            }
        }
    }
});

   //自定义过滤器，可以在过滤中传递多个参数，依次获取
app.filter('myfilter',function(){
      return function(input,param){
         //console.log(input);
       // console.log(param);
       var newInput=input.filter(function(item,index){

           if(item.indexOf(param)!==-1)
             return item;
       })

       return newInput;
       }
})
</script>
</html>

巴特西

angularJS实现可编辑的下拉框

最新文章

热门文章