我怎样才能使用AngularJSfilter格式化一个数字,以领先的零?
我检查了文件
http://docs-angularjs-org-dev.appspot.com/api/ng.filter:number
但对我来说还是不清楚的。 我想要的是我的号码有四位数字和前导零。
22 > 0022 1 > 0001
有人可以帮助,并告诉我,如果这是可能的数字或另一种filter?
不需要filter,只需在你的html中使用一个expression式即可
{{("00000"+1).slice(-6)}} // '000001' {{("00000"+123456).slice(-6)}} // '123456'
假设您的应用程序myApp
有一个名为myModule
的模块:
angular.module('myApp', ['myModule']);
在这个模块中定义你的filter:
angular.module('myModule', []) .filter('numberFixedLen', function () { return function (n, len) { var num = parseInt(n, 10); len = parseInt(len, 10); if (isNaN(num) || isNaN(len)) { return n; } num = ''+num; while (num.length < len) { num = '0'+num; } return num; }; });
在标记中使用你的filter:
{{myValue | numberFixedLen:4}}
保持最小…(与string和数字一起工作)做一些validation,如果你必须(isNumber,NaN)
// 1e8 is enough for working with 8 digits (100000000) // in your case 1e4 (aka 10000) should do it app.filter('numberFixedLen', function () { return function(a,b){ return(1e4+""+a).slice(-b); }; });
如果你希望它更小,浏览器支持箭头function,或者你正在使用babel / traceur,那么它可以被缩减为:
app.filter('numberFixedLen', ()=>(a,b)=>(1e4+""+a).slice(-b));
HTML:
{{myValue | numberFixedLen:4}}
注意这样做的灵活性较低,这只适用于10000以下的数字,如果数字更大,则必须增加4
和1e4
或者使用其他任何dynamic解决scheme。
这是为了尽可能快地做到尽可能less的事情。
这和故意的是一样的:
("10000"+1234567).slice(-4) // "4567" ("10000"+1234567).slice(-9) // "001234567"
使用underscore.string的填充函数和angular-underscore-stringfilter的最小代码:
在jsFiddle工作演示
angular度stringinput – >angular度 – 下划线 – stringfilter – > underscore.string
<div ng-app="app" ng-controller="PadController"> <div ng-repeat="num in nums">{{ num | s: 'pad':[4, '0'] }}</div> </div>
angular.module('app', ['underscore.string']).controller('PadController', function ($scope) { $scope.nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; }); // 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
s
variables是指string库。 在较旧的版本中,您可能必须将其replace为“_.str”,即。 {{ num | _.str: 'pad':[4, '0'] }}
你可以使用纯JavaScript如
('00000'+refCounter).substr(-5,5)
用5填充refCounter的值。
注意:确保检查refCounter是不是未定义 ,否则你会得到一个exception。
如果你只是处理“0”填充,并不介意按照用例来定制你的filter,我会用类似于Endless的速度来回答一些问题,但是会build议你确保这个数字还不够长喜欢:
app.filter('minLength', function () { return function(input,len){ input = input.toString(); if(input.length >= len) return input; else return("000000"+input).slice(-len); } });
因为这样不仅可以避免修剪已经满足最小长度的数字或string,这对于避免奇怪的东西很重要,例如:
{{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code
但通过使用“000000”而不是像1e6这样的数字,可以避免同时改变input的实际值(通过不添加1000000),并避免将数字隐式转换为string,从而节省考虑input的计算步骤已经被转换成string来避免上面提到的剪辑问题。
如果你想要一个不需要任何用例testing的系统,比bguiz的解决scheme更快更灵活,我使用如下的filter:
app.filter('minLength', function(){ return function(input, len, pad){ input = input.toString(); if(input.length >= len) return input; else{ pad = (pad || 0).toString(); return new Array(1 + len - input.length).join(pad) + input; } }; });
这允许你做标准:
{{ 22 | minLength:4 }} //Returns "0022"
但也给你select添加非零填充选项,如:
{{ 22 | minLength:4:"-" }} //Returns "--22"
你可以使用数字或string来执行古怪的东西:
{{ "aa" | minLength:4:" " }} //Returns " aa"
另外,如果input的时间已经超过了你想要的长度,那么滤波器就会在没有任何调整的情况下popup:
{{ 1234567 | minLength:4 }} //Returns "1234567"
您还避免了需要为len
添加validation,因为当您调用没有len
参数的filter时,angular会在您的控制台中的RangeError
中尝试创build一个长度为null
的数组,从而使其debugging变得简单。
如果需要修改,请使用下面的filter修改
app.filter('customNo', function () { return function (input) { var n = input; return (n < 10) ? '000' + n : (n < 100) ? '00' + n : (n < 1000) ? '0' + n : '' + n; } }); <span>{{number|customNo}}</span>
另一个例子:
// Formats a number to be at least minNumberOfDigits by adding leading zeros app.filter('LeadingZerosFilter', function() { return function(input, minNumberOfDigits) { minNumberOfDigits = minNumberOfDigits || 2; input = input + ''; var zeros = new Array(minNumberOfDigits - input.length + 1).join('0'); return zeros + input; }; });
最干净的将是创build你自己的filterangular度和使用它。 已经有几个答案,但我个人觉得这是最简单的阅读。 按需要的零长度创build一个数组,然后用零连接数组。
myApp.filter('customNumber', function(){ return function(input, size) { var zero = (size ? size : 4) - input.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + input; } });
像这样使用它:
{{myValue | customNumber}}
我也做了它,所以你可以指定前导零作为参数:
{{myValue | customNumber:5}}
演示: http : //www.bootply.com/d7SbUz57o8
这是TypeScript中指令的Angular 1.x变体,它可以处理整数和小数。 由于TS,一切都被认为是“types安全的”。
adminApp.filter("zeroPadNumber", () => (num: number, len: number): string => { if (isNaN(num) || isNaN(len)) { return `${num}`; } if (`${num}`.indexOf(".") > -1) { var parts = `${num}`.split("."); var outDec = parts[0]; // read the before decimal while (outDec.length < len) { outDec = `0${outDec}`; } return outDec + parts[1]; // reappend the after decimal } else { var outInt = `${num}`; while (outInt.length < len) { outInt = `0${outInt}`; } return outInt; } });