angular-ui-select 
官方文档：github地址：https://github.com/angular-ui/ui-select
请大家多看文档
 
 
首先注意版本的问题，如果版本不对应，是会报非常多意想不到的错误  的。
 一：演示功能：支持下拉单选过滤。效果如下图：
 

栗子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet">

</head>

<body>

    <div>

        <div ng-app="app" ng-controller="ctrl">

            <ui-select ng-model="selected.value">

                <ui-select-match>

                    <span ng-bind="$select.selected.name"> {{$select.selected.name}}</span>

                </ui-select-match>

                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">

                    <span ng-bind="item.name"></span>

                </ui-select-choices>

            </ui-select>

            {{selected.value}}

        </div>

    </div>

    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js"></script>

    <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js"></script>

    <script>

        angular.module('app', ['ui.select', 'ngSanitize'])

            .controller('ctrl', ['$scope', function ($scope) {

                $scope.itemArray = [

                    { id: 1, name: 'first' },

                    { id: 2, name: 'second' },

                    { id: 3, name: 'third' },

                    { id: 4, name: 'fourth' },

                    { id: 5, name: 'fifth' },

                ];

                $scope.selected = { value: $scope.itemArray[2] };

            }]);

    </script>

</body>

</html>

适用场景：适用于第一次就把数据请求回来的场景，并且还适用于固定的几个下拉选项。

多选的时候，注意两个点：

1.multiple
2.
 <ui-select ng-model="selected.value " multiple >

                <ui-select-match>

                    <span ng-bind="$item.name"> </span>

                </ui-select-match>

                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">

                    <span ng-bind="item.name"></span>

                </ui-select-choices>

            </ui-select>

二：支持下拉多选过滤，效果展示：

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet">

</head>

<body>

    <div>

        <div ng-app="app" ng-controller="ctrl">

            <ui-select ng-model="selected.value " multiple >

                <ui-select-match>

                    <span ng-bind="$item.name"> </span>

                </ui-select-match>

                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">

                    <span ng-bind="item.name"></span>

                </ui-select-choices>

            </ui-select>

            {{selected.value}}

        </div>

    </div>

    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js"></script>

    <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js"></script>

    <script>

        angular.module('app', ['ui.select', 'ngSanitize'])

            .controller('ctrl', ['$scope', function ($scope) {

                $scope.itemArray = [

                    { id: 1, name: 'first' },

                    { id: 2, name: 'second' },

                    { id: 3, name: 'third' },

                    { id: 4, name: 'fourth' },

                    { id: 5, name: 'fifth' },

                ];

                $scope.selected = { value: $scope.itemArray[2] };

            }]);

    </script>

</body>

</html>
备注：当你觉得你的需求还是没有满足的时候，建议你还是再刷一遍例子，文档
为啥会选择它呢，因为它就是满足了我的所有需求啊
我想这篇文章，不仅仅是想记录下来我做项目时遇到问题，查找资料，解决问题的过程。
我希望它可以在帮我解决问题的同时也能够帮助解决你们遇到的问题。

angular-ui-select 下拉框支持过滤单选多选解决方案（系列一）的更多相关文章

  1. 让前端的下拉框支持单选、多选及全选，后台MyBaits解决方案

    目录 一.解决思路 二.请求参数 三.后台相关代码 四.Mybatis注意要点 一.解决思路   让前端的下拉框支持单选.多选及全选,后台让Mybatis使用** trim **标签拼接动态SQL,实 ...

  2. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  3. 在angular中实现下拉框的两种方式 ng-repeat和 ng-option

    1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码   <!DOCTYPE html> <html&g ...

  4. Selenium常用操作汇总二——如何操作select下拉框

    下面我们来看一下selenium webdriver是如何来处理select下拉框的,以http://passport.51.com/reg2.5p这个页面为例.这个页面中有4个下拉框,下面演示4种选 ...

  5. 简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法

    1.背景 最近在做项目的过程中,我们使用了Object控件,但是同时在上面写了一个select下拉框,因此每次点击下拉框的时候我们会发现,下拉框的部分内容被Object控件给遮挡了,调查研究后发现,我 ...

  6. selenium webdriver学习（八）------------如何操作select下拉框(转)

    selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver   下面我们来看一下selenium webdriv ...

  7. Selenium系列（十） - 针对Select下拉框的操作和源码解读

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  8. 实现select下拉框的无限加载（懒加载）

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  9. 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）

    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...

随机推荐

  1. centos7 安装erlang rabbitMQ

    环境: 虚拟机 centos7 minimal 一.安装Erlang 1.安装依赖 yum install build-essential openssl openssl-devel unixODBC ...

  2. IIS设置Access-Control-Allow-Origin

    打开iis,找到“HTTP响应标头”点进去, 在右侧可以看到添加,然后添加如下标头即可Access-Control-Allow-Headers:Content-Type, api_key, Autho ...

  3. Linux pkg-config命令

    一.简介 pkg-config用来检索系统中安装库文件的信息.典型的是用作库的编译和连接. 二.实例 http://blog.chinaunix.net/uid-20595934-id-1918368 ...

  4. 9.TOP 子句--mysql limit

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. MySQL 语法 SELECT c ...

  5. 转：Linux awk 命令 说明

    一.  AWK 说明 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是 ...

  6. c#并发编程经典实例文摘

    第1章 并发编程概述 1.1 并发编程简介 并发: 多线程(包括并行处理) 异步编程(异步操作)程序启动一个操作,而该操作将会在一段时间后完成 响应时编程(异步事件)可以没有一个实际的开始,可以在任何 ...

  7. eWebEditor9.x整合教程-Xproer.WordPaster

    版权所有 2009-2017 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/wordpa ...

  8. backquote

    character (`) A backquote or backtick. echo 'date' date echo `date` 2015年 07月 03日 星期五 16:11:13 CST j ...

  9. 编写高质量代码改善C#程序的157个建议——建议26：使用匿名类型存储LINQ查询结果

    建议26:使用匿名类型存储LINQ查询结果 从.NET3.0开始,C#开始支持一个新特性:匿名类型.匿名类型有var.赋值运算符和一个非空初始值(或以new开头的初始化项)组成.匿名类型有如下基本特性 ...

  10. 备忘录（Memento）模式

    *备忘录模式(Memento):在不破坏封装性的前提下,捕获一个对戏的内部状态, * 并在该对象之外保存这个状态.这样以后就能恢复到原来保存的状态 *Originator(发起人): 负责创建一个备忘 ...