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学习笔记(三十)-指 ...
随机推荐
- 大课深度复盘、解密研发效率之道 | 第42届MPD工作坊成都站日程公布!
互联网时代,随着区块链.大数据.人工智能等技术的快速发展,产品迭代速度飞快.在这样的市场环境下,提升研发效率.降低研发成本,同时支撑业务的快速发展,是每个企业都追求的目标之一. 大中型企业如何快速转型 ...
- 新版Ubuntu安装日文输入法
在Ubuntu的设置中安装日文输入法 本周在调试书上代码时需要安装日文输入法,我发现在百度上并没有在最新版Ubuntu下安装日文输入法的教程,于是我写了这篇博客来与大家分享一下我的安装过程. a.如图 ...
- Oracle单行函数
一.尽管各个数据库都是支持sql语句的.可是每一个数据库也有每一个数据库所支持的操作函数,这些就是单行函数.假设想进行数据库开发的话.除了要回使用sql语句外,就是要多学习函数. 1.单行函数的分类: ...
- here文档 here doc EOF重定向
here文档 here doc EOF重定向 http://www.cnblogs.com/xiangzi888/archive/2012/03/24/2415077.html 在shell脚本程序 ...
- RoboWare Studio 安装
RoboWare Studio是一个ROS集成开发环境.它使 ROS开发更加直观.简单.并且易于操作.可进行ROS工作区及包的管理.代码编辑.构建及调试. 下载链接:https://pan.baidu ...
- 实验二《Java面向对象程序设计》的一点说明
实验二<Java面向对象程序设计>的一点说明 本周的实验要求是: 完成实验二<Java面向对象程序设计>中的内容 其中Eclipse相关的内容参考Intellj IDEA 简易 ...
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现
目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...
- 使用axios优雅的发起网络请求
原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...
- numpy 数组对象
numpy 数组对象NumPy中的ndarray是一个多维数组对象,该对象由两部分组成:实际的数据,描述这些数据的元数据# eg_v1 import numpy as np a = np.arange ...