记入一些思考 :

这 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. GIS优秀博客以及网址收藏，持续更新

    1.gislaozhang arcpy,模型构建器,arcpro 地址:https://blog.csdn.net/gislaozhang?t=1      2.雾语 arcpy,模型构建器,arcg ...

  2. vs防止编译不能连接生成pdb文件

    问题的原因:debug和release版本生成的目标文件名称(Target Name)都一样,所以导致链接失败:

  3. Elasticsearch学习笔记（一）cat API

    一.Cat通用参数 Verbose GET /_cat/XXX/?v 开启详细输出 Help GET /_cat/XXX/?help 输出可用的列 Headers GET /_cat/XXX/?h=c ...

  4. Selenium 2（Webdriver）

    如何用webdriver打开一个浏览器,我们常用的浏览器有firefox和IE两种,firefox是selenium支持得比较成熟的浏览器,很多新的特性都会在firefox中体现.但是做页面的测试,启 ...

  5. jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...

  6. 用php的chr和ord函数实现字符串和ASCII码互转

    http://shenyongqang.blog.163.com/blog/static/22439113201002941856838/ chr和ord函数是用来字符串和ASCII码互转的. ASC ...

  7. int 的重载

    测试代码: 结果: 分析: 首先创建两个对象同时进行初始化所以两次调用带参的构造函数: 其次在创建一个 对象然后将其等于前两个对象相加,这里由于该类没有重载+运算符而是重载了int 所以当两个对象相加 ...

  8. 10 个非常实用的 SVG 动画操作JavaScript 库

      SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...

  9. 使用dbeaver查mysql的表会导致锁表的问题

    查询完成之后接着需要使用rollback,不然其它session没法执行语句.

  10. 转：在 C# 中使用 P/Invoke 调用 Mupdf 函数库显示 PDF 文档

    在 C# 中使用 P/Invoke 调用 Mupdf 函数库显示 PDF 文档 一直以来,我都想为 PDF 补丁丁添加一个 PDF 渲染引擎.可是,目前并没有可以在 .NET 框架上运行的免费 PDF ...