angular 实现input中view显示为货币格式，model中绑定的为纯数字

今天是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可以解决，于是乎就傻乎乎的去不断尝试，得出结论：大婶吃的盐比我吃的米还多，代码如下：

定义一个指令：

//directive

downline.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好一点点的语言。打完收工，水平有限，望各位路过的大婶指点。