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学习笔记(三十)-指 ...
随机推荐
- Cesium调用 WMS 、WMTS 服务
参考文章地址:Cesium调用 ArcGIS Sever 以及 GeoSever 发布的地图服务 cesium测试示例(包括官方的示例)中 arcgis服务都无法访问了 根据原文找到一个在线的可访 ...
- MVEAN_day05 Nexus私服对的搭建
序言:为什么要搭建私服 因为在公司中我们是以团队进行开发的,不在是在自己的本地仓库中进行,我们需要连接公司远程仓库进行jar依赖.在公司的局域网中搭建的私服,然后开发人员连接这台计算机,进行团队开发. ...
- Fiddler修改图片显示
培训课讲修改请求值,记录一下操作步骤: 步骤如下: 1. 点击人人网图片另存为到桌面 2. 打开fiddler,找到图片发送的请求(单击图片的链接,点击右边面板的Inspectors.查看ImageV ...
- mescroll在vue中的应用
1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...
- HDU 3033 分组背包(至少选一个)
分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...
- Python之包管理
1.setup.py from distutils.core import setup setup(name='Distutils', version='1.0', description='Pyth ...
- TheFatRat一般使用
利用它生成后门 第一种通常情况下速度很快,较稳定,但免杀效果极差 推荐使用第二种 免杀效果好,如下图 第一种是最新的模块,较免杀效果极好.还可伪造图标 第二种是旧的
- Django框架详细介绍---ORM---图书信息系统专题训练
from django.db import models # Create your models here. # 书 class Book(models.Model): title = models ...
- 论文阅读(XiangBai——【AAAI2017】TextBoxes_A Fast Text Detector with a Single Deep Neural Network)
XiangBai——[AAAI2017]TextBoxes:A Fast Text Detector with a Single Deep Neural Network 目录 作者和相关链接 方法概括 ...
- python SyntaxError: Non-ASCII character '\xe6' in file
[1]python程序执行报错 报错:SyntaxError: Non-ASCII character '\xe6' in file /tmp/788580473/main.py on line 7, ...