angular2 在input上使用管道(过滤器)

1.例牌,上需求

需求:用angular2进行开发Web App,登录时,用户填写的小写字母直接转换成大写字母显示:  abc=>ABC;

各位客官看到可能想打我,ng2不是有个uppercase管道吗?直接用就好了,还跑来这里讲故事,客官别急啊:

{‘abc’ | uppercase} 这个样子是会显示出大写的,但是,我说的是input,难道要这样写:

显然如果这样不报错我就不来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:注意,输入字符的最后一个还是没有转换的,因为最后一个字符流向了数据模型,但是没有留向模型,具体为什么自己去想,想不明白我也没办法了


你可能感兴趣的:(angular2)