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. 通过class类获取类的成员变量和构造函数信息

  2. Gym 101128A ：Promotions （Southwestern Europe Regional Contest ）

    题意 一个公司里有E个员工P个上下级关系.这个公司有一种晋升制度.如果要晋升员工a,那么必须要先晋升a的所有领导.给出一个区间[A,B],如果要晋升A个员工,有哪些员工是一定会被晋升的?如果要晋升B个 ...

  3. php_imagick超强的PHP图片处理扩展

      php_imagick是一个可以供PHP调用ImageMagick功能的PHP扩展,使用这个扩展可以使PHP具备和ImageMagick相同的功能. ImageMagick是一套功能强大.稳定而且 ...

  4. hp警告Creating default object from empty value 问题的解决方法

    hp警告Creating default object from empty value 问题的解决方法 解决方法是找到报错的位置然后看哪个变量是没有初始化而直接使用的,将这个变量先实例化一个空类.如 ...

  5. 10-python中的requests应用

    使用request方便: #_*_ coding: utf-8 _*_ ''' Created on 2018年7月14日 @author: sss ''' import requests impor ...

  6. 数字图像处理实验（16）：PROJECT 06-03，Color Image Enhancement by Histogram Processing 标签： 图像处理MATLAB 2017

    实验要求: Objective: To know how to implement image enhancement for color images by histogram processing ...

  7. zynq qemu学习

    1,ubuntu给软件包降级,先安装aptitude sudo apt-get  install aptitude 2,强制降级,等号“=”前后不能有空格 sudo aptitude install ...

  8. 1.ef 映射关系

    1.edmx <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="3 ...

  9. input file 获取不到Request.Files 解决办法

    <input type="file" name="xxxxxxx"/>必须有“name”属性,否则在后台代码中用Request.Files是取不到值 ...

  10. Eclipse工具

    1 ArrayList的常见方法 * a: add(参数) 向集合中添加元素 * b: get(int index) 取出集合中的元素,get方法的参数,写入索引 * c: size() 返回集合的长 ...