记入一些思考 :

这 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)的更多相关文章

  1. Angular 学习笔记 Material

    以后都不会写 0 到 1 的学习记入了,因为官网已经写得很好了. 这里只写一些遇到的坑或则概念和需要注意的事情. Material Table 1. ng-content 无法传递 CdkColumn ...

  2. Angular 学习笔记 (Material Datepicker)

    https://material.angular.io/components/datepicker/overview 官网介绍很清楚了,这里记入一下我比较不熟悉的. 1. moment js Angu ...

  3. Angular 学习笔记 (Material table sticky 原理)

    更新 : 2019-12-03 今天踩坑了, sticky 了解不够深 refer http://www.ruanyifeng.com/blog/2019/11/css-position.html 阮 ...

  4. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  5. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  9. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

随机推荐

  1. Struts2 学习

    Struts2简介 1.概念:轻量级的MVC框架,主要解决了请求分发的问题,重心在控制层和表现层.低侵入性,与业务代码的耦合度很低.Struts2实现了MVC,并提供了一系列API,采用模式化方式简化 ...

  2. LwIP协议栈规范翻译——摘要目录

    摘要 LwIP是一种TCP/IP协议栈的实现.LwIP协议栈专注于减少内存的使用和代码的大小,使LwIP适用于嵌入式系统中在有限的资源下能够使用小型的客户机.为了减少处理和内存的需求,LwIP使用裁剪 ...

  3. HDU 3033 分组背包(至少选一个)

    分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...

  4. 第九篇——Struts2的拦截器

    拦截器: Struts2大多数核心功能都是通过拦截器实现的,每个拦截器完成某项功能: 拦截器方法在Action执行之前或之后执行. 工作原理: 拦截器的执行过程是一个递归的过程 action请求--& ...

  5. photoshop cc 安装失败 2%

    photoshop cc 安装失败 2%   C盘--Program Files---Common Files--Adobe--caps ,把这个文件夹中的文件全部删除,然后再安装     C:\Pr ...

  6. skywalking学习之路---skywalking环境从零搭建部署

    介绍 SkyWalking项目是由华为大牛吴晟开源的个人项目,目前已经加入Apache孵化器.SkyWalking项目的核心目标是针对微服务.Cloud Native.容器化架构提供应用性能监控和分布 ...

  7. 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 ...

  8. Hdu2041 超级楼梯 (斐波那契数列)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2041 超级楼梯 Time Limit: 2000/1000 MS (Java/Others)    M ...

  9. LATCH_VARIANT = Magna compile

    after: LATCH_VARIANT = Magna in m_project_cfg.mak of PG_.. 1. first error: SED   tmp__.dep/bin/sh: / ...

  10. Html 符号

    Html  符号 往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字. 下面就是以字母或数字表示的特殊符号大全.   常用 < < 小于号或显 ...