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