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. 游戏引擎架构Note2

    [游戏引擎架构Note2] 1.视觉属性(visual property)决定光线如何与物体表面产生交互作用. 2.一个Mesh所使用三角形的多少可以用细致程度(level-of-detail,LOD ...

  2. BootstrapValidator：表单验证神器

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. php扩展开发3--扩展类传参数

    1.需要实现的细节 实现一个person类 ,实现一个doing方法和saying方法 在构造方法中传递一个数组,在doing中打印此数组 saying方法中,构建一个空数组,返回,不需要传参. 2. ...

  4. BOOL运算符号（从C#入门经典第五版中摘录）

    只总结自己觉得难的哈: (1) var1=!var2;    //(非) (2) var1=var2&var3;    //(与) (3)var1=var2|var3;    //(或) (4 ...

  5. openpyxl模块处理excel文件

    python模块之——openpyxl 处理xlsx/ xlsm文件 项目原因需要编辑excel文件,经过查询,最先尝试xlwt .wlrd这个两个模块,但是很快发现这两个模块只能编辑xls文件,然而 ...

  6. mybatis 获得一个map的返回集合

    在使用mybatis 查询结果集,有时会有需求返回一个map比如表 id username 1  name1 2 name2 3 name3 希望的查询结果是一个map 并且以id为key  表为实体 ...

  7. ThreadStart方式实现多线程

    以ThreadStart方式实现多线程 3.1 使用ThreadStart委托 这 里先以一个例子体现一下多线程带来的好处,首先在Message类中建立一个方法ShowMessage(),里面显示了当 ...

  8. Robot Framework - 基础关键字 BuiltIn 库（一）

    今天给大家分享的是Robot Framework 机器人框架中 BuiltIn 基础库的使用...BuiltIn 库里面提供了很多基础方法助力于我们在自动化测试领域中做的更好!——本系列教程是教会大家 ...

  9. Which Uri Encoding method should i use in C#/.net?

    June 19, 2015 This too is one of the boring "factual" posts. Sorry Lachlan. I never know w ...

  10. HDU 3729 I'm Telling the Truth (二分匹配)

    题意:给定 n 个人成绩排名区间,然后问你最多有多少人成绩是真实的. 析:真是没想到二分匹配,....后来看到,一下子就明白了,原来是水题,二分匹配,只要把每个人和他对应的区间连起来就好,跑一次二分匹 ...