angular2 在input上使用管道(过滤器)
来源:互联网 发布:java web小项目实例 编辑:程序博客网 时间:2024/04/29 02:28
1.例牌,上需求
需求:用angular2进行开发Web App,登录时,用户填写的小写字母直接转换成大写字母显示: abc=>ABC;
各位客官看到可能想打我,ng2不是有个uppercase管道吗?直接用就好了,还跑来这里讲故事,客官别急啊:
{‘abc’ | uppercase} 这个样子是会显示出大写的,但是,我说的是input,难道要这样写:
<input [(ngModel)]='userName | uppercase' > 显然如果这样不报错我就不来YY了
这时又有人说,给变量添加个监听就好了,监听到变量有变化就直接使用uppercase,这个方法是可以的,但是:
别人都有做好的管道给你了,腻害监听,脱裤子放屁不嫌麻烦啊,要是这样子写代码不动脑,一个小项目你可以写几千上万行,到时维护修改搞死自己
既然别人都有做好了,而且你又上了ng2的道了,肯定用别人的了
不扯淡,主题:
ngModel双向绑定有两种形式:
1.[(ngModel)] 这是最常见的方式
2. [ngModel]="userName" 输入属性绑定 (ngModelChange)="userName=$event" 输出属性绑定
第一个是输入属性,数据从模型流向视图, 第二个是输出属性:数据从视图流向模型,$event这个时候表示输入框的值(注意,$event在这里比较特殊,一般方法中的$event代表的是节点对象)
正常情况都是使用第一种绑定方式,但是如果对输入和输出数据有不一样的处理,那就使用第二种绑定方法,看到这里你也知道该怎么整了吧,如果还不知道我也没办法了。
还不知道看这里:
<input [ngModel]="userName| uppercase" (ngModelChange)="userName=$event" type="text">
ps:注意,输入字符的最后一个还是没有转换的,因为最后一个字符流向了数据模型,但是没有留向模型,具体为什么自己去想,想不明白我也没办法了
0 0
- angular2 在input上使用管道(过滤器)
- angular2--pipe管道使用
- angular2.0如何使用管道?
- ionic2的component中使用angular2中的管道使用(特别是number管道,小坑)
- Angular2 使用管道Pipe以及自定义管道格式数据
- 在webapp上使用input:file
- Angular2父子组件之间数据传递:@Input和@Output (上)
- angular2中数据绑定方法总结和管道使用
- 如何自定义Angular2 管道
- angular2系统学习 - 管道
- Angular2-管道Pipe
- Angular2 管道 pipe
- Angular2 初识管道
- 管道过滤器
- **管道---过滤器*
- Angular2 @Input 和 @Input 用法
- 在Angular2中使用Observable对象
- 管道过滤器(Pipe-And-Filter)模式
- java编程之JDBC
- QQ圈圈99+ 进群免费拉
- maven中的distributionManagement的作用
- android中获取NavigationView中的控件方法
- 12实践项目1.1
- angular2 在input上使用管道(过滤器)
- mysql建立远程连接!
- LeetCode #235 - Lowest Common Ancestor of a Binary Search Tree Easy
- QQ圈圈99+ 进群免费拉
- JAVA利用反射调用第三方JNI库
- ios 比较两个数组的数据的不同
- Android studio 解析JSON格式数据
- osgFX实现方式解析
- sed解析url的域名