将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实现可编辑的下拉框的更多相关文章

  1. 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

  2. html 可编辑的下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 自制jquery可编辑的下拉框

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...

  4. javascript实现可编辑的下拉框

    曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如 ...

  5. EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框，并点一次触发一次事件

    主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...

  6. jquery实现可编辑的下拉框( input + select )

    HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...

  7. 自定义SWT控件一之自定义单选下拉框

    一.自定义下拉控件 自定义的下拉框,是自定义样式的,其中的下拉框使用的是独立的window,非复选框的下拉框双击单机其它区域或选择完之后,独立window构成的下拉框会自动消失. package co ...

  8. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  9. angularjs下拉框实现渲染html

    angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...

随机推荐

  1. 打开APK里的AndroidManifest.xml乱码

    直接解压apk,打开AndroidManifest.xml显示乱码,因为这里面是二进制字符,和打开文件的编辑器无关.(也可以用ultraedit打开查看,有明文显示.只是看起来搜起来不是很方便而已) ...

  2. Maven 添加自定义 archetype

    环境:jdk7 maven3.23 eclipse mars 关于maven是使用插件自带的还是单独下载的,应该都是可以的,但是要注意maven和jdk版本的问题,比如3.2.3版本的maven支持j ...

  3. 浅谈C语言中结构体的初始化

    转自:http://www.jb51.net/article/37246.htm <代码大全>建议在变量定义的时候进行初始化,但是很多人,特别是新人对结构体或者结构体数组定义是一般不会初始 ...

  4. Linux 第05天

    Linux 第05天 1.连接到Internet 1.1 配置网络信息 dmesg命令————查看网卡信息 dmesg | grep -i net ifconfig命令————查看IP.网关等相关信息 ...

  5. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  6. 判断IP地址是否合法类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace IPFl ...

  7. BZOJ2471 : Count

    考虑KMP,设$f[i][j][S]$表示还剩最低$i$位没有确定,目前KMP匹配到了$j$这个位置,前缀匹配情况是$S$,最终会匹配到哪里,中途匹配成功几次. 其中$S[i]$是一个pair< ...

  8. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  9. Hadoop openssl false

    错误如图 检查Hadoop native 经过: 1. 重新编译cdh的hadoop2.5.0,复制native 2. 重新格式化namenode 都不行,另外openssl和openssl-dev都 ...

  10. android获取本地图片并显示图片

    import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content ...