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 ...
随机推荐
- TensorFlow模型保存和提取方法
一.TensorFlow模型保存和提取方法 1. TensorFlow通过tf.train.Saver类实现神经网络模型的保存和提取.tf.train.Saver对象saver的save方法将Tens ...
- python3 破解 geetest（极验）的滑块验证码
Kernel_wu 快速学习的实践者 python3 破解 geetest(极验)的滑块验证码 from selenium import webdriver from selenium.webdriv ...
- Linux 搭建NFS文件服务器实现文件共享
我们接着玩Linux,O(∩_∩)O哈哈~ 1.什么是nfs NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP ...
- maven搭建ssm
前言 本文旨在利用maven搭建ssm环境,而关于maven的具体内容,大家可以去阅读<Maven 实战>.其实园内这方面文章已有不少,那么为什么我还要重复造轮子呢?我只是想记录自己的实践 ...
- jsoup 的简单应用
导入相关jar包 package jsoup.zr.com.utils; import java.io.IOException; import java.util.List; import org.j ...
- opennebula 发送序列化ID，构造json格式错误
- convertTo
转自 http://blog.csdn.net/xiaxiazls/article/details/51204265 在使用Opencv中,常常会出现读取一个图片内容后要把图片内容的像素信息转为浮点并 ...
- Web服务器父与子 Apache和Tomcat区别(转)
From http://developer.51cto.com/art/201007/210894.htm 熟悉三国的朋友都知道曹操,曹操有二十五个儿子,其中最得曹操宠爱的是曹丕.曹植.曹彰三个,曹丕 ...
- 使用mail架包发送邮件javax.mail.AuthenticationFailedException: failed to connect at javax.mail.Service.connec
这个错误是因为连接不上邮箱服务器导致的,可能有以下几个原因(以网易邮箱为例) 1.当使用第三方登录邮箱时需要有邮箱的授权码,且要开启POP3/SMTP/IMAP:服务 2.在代码中要调用网易邮箱的密码 ...
- 丢弃昂贵的Detours Professional 3.0,使用免费强大的EasyHook
我们要先看看微软官方的著名HOOK库: Detours Professional 3.0 售价:US$9,999.95 功能列表: Detours 3.0 includes the following ...