<!DOCTYPE html>

<html ng-app="App">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../plugins/bootstrap3.3.0/css/bootstrap.min.css" />

        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

    </head>

    <body ng-controller="mainCtrol">

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 300px;">

        <!--<option selected="selected">orange</option>-->

        <!--<option>white</option>-->

        <!--<option selected="selected">purple</option>-->

    </select>

        <script type="text/javascript" src="../plugins/angular1.5.8/angular.min.js"></script>

        <script type="text/javascript" src="../plugins/jquery1.10.2/jquery-1.10.2.min.js"></script>

        <script type="text/javascript" src="../plugins/bootstrap3.3.0/js/bootstrap.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

        <script type="text/javascript">

            var App = angular.module('App', []);

            App.controller('mainCtrol', ['$scope', function($scope) {

                $(document).ready(function() {

                    var data = [

                        {

                            id: 0,

                            text: 'enhancement'

                        },

                        {

                            id: 1,

                            text: 'bug',

                            selected: true

                        },

                        {

                            id: 2,

                            text: 'duplicate'

                        },

                        {

                            id: 3,

                            text: 'invalid'

                        },

                        {

                            id: 4,

                            text: 'wontfix'

                        }

                    ];

                    var mySelect2 = $('.js-example-basic-multiple').select2({

                        data: data,

                        placeholder: 'This is my placeholder',

                        maximumSelectionLength: 5,

                        tags: true,

                        tokenSeparators: [',', ' '],

                        allowClear: true

//                        templateSelection: formatState

                    });

                    $('.js-example-basic-multiple').on('select2:select', function (e) {

                        var arr = mySelect2[0].selectedOptions;

                        var arr_res = [];

                        for (var i = 0, len = arr.length; i < len; i++) {

                            arr_res.push(Number(arr[i].value));

                        }

                        console.log(arr_res);

                    });

                    function formatState(state){

//                        console.log(state);

//                        if (!state.id) {

//                            return state.text;

                            return state.text;

//                        }

//                        var $state = $(

//                            '<span>' + state.text + '</span>'

//                        );

//                        return $state;

                    }

                });

            }]);

        </script>

    </body>

</html>

anguar-select2的更多相关文章

  1. 利用Select2优化@Html.ListBoxFor显示，学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  2. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  3. select2 demo

    https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的opti ...

  4. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  5. select2 清空数据

    最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', n ...

  6. select2插件不兼容ie7，ie7下样子显示错位问题

    1.源文件(未修改) select2.min.css.select2.min.js 2.ie7下显示样式: 3.ie8下显示样式: 4.经查看发现ie7下对一些属性的解析和ie8不同,需对ie7另作h ...

  7. select2的相关问题

    在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如 ...

  8. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

  9. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  10. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

随机推荐

  1. 论 Java 中的内存分配

    Java内存分配主要包括以下几个区域: 1. 寄存器:我们在程序中无法控制 2. 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3. 堆:存放用new产生的数据 4. 静 ...

  2. WPF&Winform版本地图引擎

    最近几年一直从事地图方面的工作,自主研发了WPF和Winform两个版本瓦片地图引擎.轻量级.不依赖第三库.先上一张图片展示一下吧! 产品包括服务端和客户端两部份: 1.服务端主要地图图层配制和空间计 ...

  3. Redis Sentinel 高可用服务搭建

    阅读目录: 关于 Redis 的概念 关于 Redis Sentinel 的概念 搭建 Redis Server(master) 搭建 Redis Server(slave) 搭建 Redis Sen ...

  4. IOS 使用cocoapods后无法导入头文件问题

    IOS 使用cocoapods后无法导入头文件问题 这时候如果你发现import的时候没有提示AFN e t wo r k i n g.h的文件,可以在target-Build Settings下修改 ...

  5. OpenCV 之 空间滤波

    1  空间滤波 1.1  基本概念 空间域,在图像处理中,指的是像平面本身: 空间滤波,则是在像平面内,对像素值所进行的滤波处理. 如上图所示,假设点 (x, y) 为图像 f 中的任意点,中间正方形 ...

  6. SecureCRT8.0设置语法高亮

    SecureCRT默认不显示语法高亮,整个界面颜色单一,用起来很不舒服,也没有效率,所有通过设置一下语法高亮还是很有必要的, 默认字体也看着不是很清晰.所以还是修改一下预告高亮比较好 设置语法高亮,多 ...

  7. SPI知识总结

    SPI知识总结 一.定义 SPI(Serial Peripheral Interface--串行外设接口)总线系统是一种同步串行外设接口,它可以使MCU与各种外围设备以串行方式进行通信以交换信息. 优 ...

  8. R语言︱排序问题

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 数据排序 1.sort(),rank(),or ...

  9. Java利用递归算法统计1-6的数组排列组合数

    Java利用递归算法统计1-6的数组排列组合数 1.设计源码 /** * @Title:ArrayCombination.java * @Package:com.you.data * @Descrip ...

  10. windows下使用docker安装tensorflow

    一.安装Docker 1.首先先按照docker,从https://get.daocloud.io/toolbox/  下载exe文件就好 双击安装会多出来三个东西: Oracle VM Virtua ...