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. java Web jsp嵌入代码的三种方式

    1,表达式标签  <%= 2+3%> 唯一有显示功能的标签 作用: 计算表达式的返回值 将表达式的返回值显示到网页中. 注意: 表达式中不能有分号 2,普通脚本标签  <% %> ...

  2. Professional C# 6 and .NET Core 1.0 - Creating Hello, World! with Visual Studio

    本文为转载,学习研究 Creating Hello, World! with Visual Studio Chapter 1, “.NET Application Architectures,” ex ...

  3. js,javascript生成 UUID的四种方法

    全局唯一标识符(GUID,Globally Unique Identifier)也称作 UUID(Universally Unique IDentifier) . GUID是一种由算法生成的二进制长度 ...

  4. SSL认证

    SSL认证 单向认证 1.发一串消息个对方 2.对方用私钥加密后返回 3.本方用对方的公钥解密,验证消息是否正确, 如果消息相同,则本方认可对方 双向认证 本方认证对方 对方认证本方

  5. 21. Date 函数

    SQL 日期 当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了. 在讨论 ...

  6. 第九课，ROS仿真1

    ---恢复内容开始--- 1.stage simulator 它是一个轻量级的仿真软件,它的包名称是stage_ros,可以进入看看,其包含地图在子目录world下, 启动之: rosrun stag ...

  7. JavaScript——Dom编程（1）

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法M:模型 DOM 是针对xml(htm ...

  8. SpringMVC——映射请求参数

    Spring MVC 通过分析处理方法的签名,将 HTTP 请求信息绑定到处理方法的相应人参中. @PathVariable @RequestParam @RequestHeader 等) Sprin ...

  9. IE浏览器和Firefox浏览器兼容性问题及解决办法

    IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...

  10. docker搭建gitbook服务

    Gitbook Gitbook简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书,GitBook 并非关于 Git ...