记入一些思考 :

这 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. Xcode工程编译错误之iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.

    概要: 在我们升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no l ...

  2. js--单选按钮赋值

    var sex='${userInfo.sex}'; if(sex=="女"){ $("input[name=sex][value='女']").attr(&q ...

  3. Python字符串拼接的6种方法（转）

    add by zhj: 对于多行字符串连接,第6种连接方法很方便,连接时不会添加额外的空格. 原文:http://www.cnblogs.com/bigtreei/p/7892113.html 1. ...

  4. python框架之Django(16)-接入Redis

    准备 安装Redis 参考 Ubuntu 中 Redis 的安装与使用. 在python中使用Redis 参考 python 中使用 Redis . 安装依赖包 在 Django 中接入 Redis ...

  5. Centos配置tomcat服务并且开机自启动

    把要配置成服务的tomcat文件夹中的catalina.sh脚本文件拷一份到/etc/init.d目录,并且改文件名称为tomcat6 cp /usr/web/tomcat/tomcat-/bin/c ...

  6. Monte Carlo simulated annealing

    蒙特·卡罗分子模拟计算 使用蒙特·卡罗方法进行分子模拟计算是按照以下步骤进行的: 1． 使用随机数发生器产生一个随机的分子构型. 2． 对此分子构型的其中粒子坐标做无规则的改变,产生一个新的分子构型. ...

  7. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  8. [macOS] keychain的跳坑之旅！git拉取的权限问题

    故事背景,svn与git各有长处,不过git大势所趋吧,那就搞搞.git的服务端,是基于phabricator搭建的,关于它的资料自行google就好了.其实之前运维已经搭好了phabricator了 ...

  9. tensorflow输出

    在Session对象上调用run()函数,执行流图,即可得到输出, 可获取单个输出,也可获取多个输出 import tensorflow as tf import numpy as np consta ...

  10. flask_mail发送163邮件，报553错误的原因

    最近在练习用flask_mail发送163邮件时报错: reply: '553 authentication is required,163 smtp9,DcCowAD3eEQZ561caRiaBA- ...