angular-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>
适用场景：适用于第一次就把数据请求回来的场景，并且还适用于固定的几个下拉选项。
多选的时候，注意两个点：
<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 下拉框支持过滤单选多选解决方案（系列一）的更多相关文章
- 让前端的下拉框支持单选、多选及全选，后台MyBaits解决方案
目录 一.解决思路 二.请求参数 三.后台相关代码 四.Mybatis注意要点 一.解决思路 让前端的下拉框支持单选.多选及全选,后台让Mybatis使用** trim **标签拼接动态SQL,实 ...
- Bootstrap Flat UI的select下拉框显示不出来 问题解决
Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...
- 在angular中实现下拉框的两种方式 ng-repeat和 ng-option
1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码 <!DOCTYPE html> <html&g ...
- Selenium常用操作汇总二——如何操作select下拉框
下面我们来看一下selenium webdriver是如何来处理select下拉框的,以http://passport.51.com/reg2.5p这个页面为例.这个页面中有4个下拉框,下面演示4种选 ...
- 简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法
1.背景 最近在做项目的过程中,我们使用了Object控件,但是同时在上面写了一个select下拉框,因此每次点击下拉框的时候我们会发现,下拉框的部分内容被Object控件给遮挡了,调查研究后发现,我 ...
- selenium webdriver学习（八）------------如何操作select下拉框(转)
selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver 下面我们来看一下selenium webdriv ...
- Selenium系列（十） - 针对Select下拉框的操作和源码解读
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- 实现select下拉框的无限加载（懒加载）
在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...
- 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）
1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...
随机推荐
- 201671010140. 2016-2017-2 《Java程序设计》java学习第一周
java学习第一周 本周是新学期的开端,也是新的学习进程的开端,第一次接触java这门课程,首先书本的厚度就给我一种无形的压力,这注定了,这门课程不会是轻松的,同时一种全新的学习方 ...
- HDR
[HDR] 什么是 HDR? 高动态范围拍摄(HDR)现在已经得到广泛使用,被用来补偿大多数数码成像传感器有限的动态范围.照片的动态范围是指最暗的色彩与最亮的色彩之间的亮度范围——也可以一并表示色调范 ...
- laravel 队列
php artisan queue:table 先创建job 队列表 php artisan migrate 执行表 php artisan make:job SendMessage 创建一个job ...
- CLR VIA C# 泛型的协变和逆变
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Jmeter接口测试-新用户注册API
新用户注册 新用户注册的接口是POST /register username/password/password_confirmation 该接口需要提供3个参数,分别是 username 用户名 p ...
- (转)Asp.Net生命周期系列三
原文地址:http://www.cnblogs.com/skm-blog/p/3178862.html 上文讲到了HttpRunTime主要做了三个事情,我们先回忆一下. 第一:雇佣了项目经理(Htt ...
- 学习如何用VS2010创建ocx控件
1参考文章 (1)这一篇将使用vc创建ocx控件:http://blog.csdn.net/jiadelin/article/details/2917225 (2)这一篇文章有关vs2010创建act ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- MQ入门总结（一）消息队列概念和使用场景
一.消息队列 消息即是信息的载体.为了让消息发送者和消息接收者都能够明白消息所承载的信息(消息发送者需要知道如何构造消息:消息接收者需要知道如何解析消息),它们就需要按照一种统一的格式描述消息,这种统 ...
- [.net 多线程]Monitor
Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能力.当一个线程拥有对象的锁时,其他任何线程都不能获取该锁.还可以使用 Monitor 来确保 ...