记入一些思考 :

这 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. Django中使用Celery

    一.前言 Celery是一个基于python开发的分布式任务队列,如果不了解请阅读笔者上一篇博文Celery入门与进阶,而做python WEB开发最为流行的框架莫属Django,但是Django的请 ...

  2. 小程序图表wx-chart

    下载地址 https://github.com/xiaolin3303/wx-charts 使用步骤: 一.解压后,把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的 ...

  3. 使用AMBER中遇到的一些问题

    1.读取蛋白问题 读取无配体pdb文件(loadpdb complex.pdb)时,出现一堆 FATAL: Atom .R<ARG >.A<HD1 > does not hav ...

  4. svn更新项目之后,项目报错一大堆并且tomcat部署项目时找不到项目

    原因是:svn更新项目以后jdk路劲不对,需要使用自己安装的jdk,即可.具体步骤如下 第一步:右击项目-->Build path-->Configure Build path... 第二 ...

  5. Python记录11:叠加多个装饰器+有参装饰器

    # import time## def timmer(func): #func=最原始的index的内存地址# def wrapper(*args,**kwargs):# start=time.tim ...

  6. HttpRunner 接口自动化简单实践

    1.安装 1.1 命令行pip直接安装就好 1.2 验证安装 命令行输入hrun -V,返回项目版本信息则表明安装成功 2.新建测试项目 这里我用直接通过框架的脚手架工具命令生成目录结构 如:hrun ...

  7. 【转】python虚拟环境--virtualenv

    virtualenv 是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包. 安装 pip install virtu ...

  8. 20190402Linux常用命令week1.1

    Linux常用命令详解week1.1 基础命令:lsmanpwdcdmkdirechotouchcpmvrmrmdircatmorelessheadtailclearpoweroffreboot 命令 ...

  9. 关于django1.8版本的静态文件配置

    环境:Python3.5.4,django1.8.1. 在页面使用js时,总是提示404找不到js文件. 于是,看看了settings文件 好像也没什么毛病.导入的方式也换了很多种,总是不行,于是只好 ...

  10. flutter popup

    card ? Overlay https://docs.flutter.io/flutter/widgets/Overlay-class.html pending....