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. ECShop研究：去掉标题中的Powered by ECShop和meta的<meta name="Generator" content="ECSHOP v2.7.3" />

    本文以ECSHOP v2.7.3为说明,其他版本可能有所不同. 标题中的Powered by ECShop去除方法: 打开includes/lib_main.php文件: 找到156行:$page_t ...

  2. 基于PCL绘制模型并渲染

    博客转载自:https://blog.csdn.net/wokaowokaowokao12345/article/details/51321988 前言 抛开算法层面不谈,要利用PCL库中PCLVis ...

  3. 截取utf8中文字符串

    英文直接截取即可. 中文应字节长度会乱码,应先转unicode截取. 如下: #-*- coding:utf8 -*- s = u'截取中文' s.decode('utf8')[0:3].encode ...

  4. 权限管理RBAC

    四张表: 1.module:id/name //模块 2.action:id /module_id/name //权限 3.user:id/name //用户表 4.group:id/user_id ...

  5. Flask框架 之 学生管理分析

    先看模板吧. index.html <body> <h1>学生列表</h1> <table border="1"> <thea ...

  6. 【linux命令】setterm控制终端属性命令（中英文）

    [linux命令]setterm控制终端属性命令(中英文) 2018年03月23日 17:13:44 阅读数:489 标签: linux 更多 个人分类: linux 摘自:https://blog. ...

  7. 编写高质量代码改善C#程序的157个建议——建议23：避免将List<T>作为自定义集合类的基类

    建议23:避免将List<T>作为自定义集合类的基类 如果要实现一个自定义的集合类,不应该以一个FCL集合类为基类,反而应扩展相应的泛型接口.FCL结合类应该以组合的形式包含至自定义的集合 ...

  8. 20169219 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 一.程序设计中临时变量的使用 任务: //定义一个数组 int arr[] = {1,2,3,4,5,6,7,8}; //打印原始数组的值 for(int i:arr ...

  9. java8之流的基本使用(二)

    概述 流(stream())是java8的一个新特性,主要的作用就是将各种类型的集合转换为流,然后的方便迭代数据用的.例如: //将List类型的集合转换为流 list.stream() 转换为流之后 ...

  10. orcl 对table的一些操作

    删除 table:drop table 表名: 恢复删除 : flashback table 表名 to before drop: 清空table : truncate table 表名; 恢复清空: ...