今天是1024,我是猿我光荣,受到程序猿乐于分享的精神影响,今天分享一个angular的干货作为纪念:
需求:在input框中输入数值,在页面上显示的数值是格式化成货币格式的数值,比如:123456789=》123,456,789;
但是绑定到ng-model中的确实123456789这样的纯数字。
需求延伸,不仅仅是数字,只要是输入框要在view中显示格式和model中的显示格式不一样,这思路都通杀。具体应用场景看广大人民群众的领导有什么需求了
思路历程:当我知道老板要这个需求的时候,我的内心是崩溃的,在用户体验方面确实合理,但是在angular中却怎么也不合理,ng-model是自动绑定的,你现在要view和
model中的格式不一样,这就尴尬了,思前想后,突然记得好像有个叫value的属性(要是你这个都没想到就不要想了,直接看代码吧),于是我就这个样子来处理了:
<input ng-model="balance" value="balance|number"> 小心翼翼的打开谷歌浏览器,刷新几百遍,然并卵。看来这个玩意不是这麽玩的。于是就去谷歌看看大婶们的思路。
后面看到有很多大婶说用指令directive可以解决,于是乎就傻乎乎的去不断尝试,得出结论:大婶吃的盐比我吃的米还多,代码如下:
定义一个指令:
//directivedownline.directive('numberFormat', ['$filter',function($filter) {//这个指令的作用是在view层和model层存放不同格式的数据 var numberFilter = $filter('number'); return { require: 'ngModel', scope:{ formatnumber:"=" }, link: function(scope, elm, attrs, ngModelCtrl) { //model 转为页面显示值 ngModelCtrl.$formatters.push(function(){ return numberFilter(scope.formatnumber); }); //页面显示值转为model ngModelCtrl.$parsers.unshift(function(){//注意,指令这里用的是=号引入,formatnumber改变会同时反映在controller上,所以下面的格式化不能直接用formatnumber操作 //把input输入框的非数字替换为空且第一位要求是1-9,然后格式化数值 elm.val(numberFilter(elm.val().replace(/[^0-9]*/g,"")));//view中的数据需要格式化 return elm.val().replace(/[^0-9]*/g,"");//返回model中的数据不需要格式化 }); } }; }]);
打开谷歌测试,又刷新几百遍,看到了漂亮的货币格式化数值,再看看model的,依旧是完美的纯数字,纯的和纯净水搬纯。
快马加鞭终于赶在十二点前写完这个博客,我是前端猿,php是世界上最好的语言,node是比php好一点点的语言。打完收工,水平有限,望各位路过的大婶指点。