Angular 学习笔记 (Material Select and AutoComplete)
记入一些思考 :
这 2 个组件有点像,经常会搞混.
select 的定位是选择. 目前 select 最糟糕的一点是 not search friendly。
还有当需要 multiple select 很多很多时, 一定要打开 options 来 unselect, 操作不友好.
再来就是如果 option 数据很大的话, 也不行.
有比较才有伤害,上面的不足是对比 autocomplete 才出现的.
autocomplete 的定位是帮助我们完成我们的 input 输入.
范围很小,只是 input text.
经常让我们搞混的原因其实是 autocomplete + chips
这个组合的用法是, autocomplete 作为 search input, 然后选择后放入 chips 里, 再通过 chips 来做移除.
这姐夫可以模拟 select 了.
所以目前通常当我们要用 select 但有遇到上面说的不 friendly 场景时,可以 autocomplete + chips 来模拟一下下.
Angular 学习笔记 (Material Select and AutoComplete)的更多相关文章
- Angular 学习笔记 Material
以后都不会写 0 到 1 的学习记入了,因为官网已经写得很好了. 这里只写一些遇到的坑或则概念和需要注意的事情. Material Table 1. ng-content 无法传递 CdkColumn ...
- Angular 学习笔记 (Material Datepicker)
https://material.angular.io/components/datepicker/overview 官网介绍很清楚了,这里记入一下我比较不熟悉的. 1. moment js Angu ...
- Angular 学习笔记 (Material table sticky 原理)
更新 : 2019-12-03 今天踩坑了, sticky 了解不够深 refer http://www.ruanyifeng.com/blog/2019/11/css-position.html 阮 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
随机推荐
- Struts2 学习
Struts2简介 1.概念:轻量级的MVC框架,主要解决了请求分发的问题,重心在控制层和表现层.低侵入性,与业务代码的耦合度很低.Struts2实现了MVC,并提供了一系列API,采用模式化方式简化 ...
- LwIP协议栈规范翻译——摘要目录
摘要 LwIP是一种TCP/IP协议栈的实现.LwIP协议栈专注于减少内存的使用和代码的大小,使LwIP适用于嵌入式系统中在有限的资源下能够使用小型的客户机.为了减少处理和内存的需求,LwIP使用裁剪 ...
- HDU 3033 分组背包(至少选一个)
分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...
- 第九篇——Struts2的拦截器
拦截器: Struts2大多数核心功能都是通过拦截器实现的,每个拦截器完成某项功能: 拦截器方法在Action执行之前或之后执行. 工作原理: 拦截器的执行过程是一个递归的过程 action请求--& ...
- photoshop cc 安装失败 2%
photoshop cc 安装失败 2% C盘--Program Files---Common Files--Adobe--caps ,把这个文件夹中的文件全部删除,然后再安装 C:\Pr ...
- skywalking学习之路---skywalking环境从零搭建部署
介绍 SkyWalking项目是由华为大牛吴晟开源的个人项目,目前已经加入Apache孵化器.SkyWalking项目的核心目标是针对微服务.Cloud Native.容器化架构提供应用性能监控和分布 ...
- mysql(5.7以上)查询报错:ORDER BY clause is not in GROUP BY..this is incompatible with sql_mode=only_full_group_by
执行mysql命令查询时: select * from table_name错误信息如: [Err] 1055 - Expression #1 of ORDER BY clause is not in ...
- Hdu2041 超级楼梯 (斐波那契数列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2041 超级楼梯 Time Limit: 2000/1000 MS (Java/Others) M ...
- LATCH_VARIANT = Magna compile
after: LATCH_VARIANT = Magna in m_project_cfg.mak of PG_.. 1. first error: SED tmp__.dep/bin/sh: / ...
- Html 符号
Html 符号 往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字. 下面就是以字母或数字表示的特殊符号大全. 常用 < < 小于号或显 ...