Comment puis-je utiliser un filtre AngularJS pour formater un numéro pour avoir des zéros avancés?

Aucun filtre requis, utilisez simplement une expression dans votre html

 {{("00000"+1).slice(-6)}} // '000001' {{("00000"+123456).slice(-6)}} // '123456' 

Disons que vous avez un module appelé myModule dans votre application myApp :

 angular.module('myApp', ['myModule']); 

Définissez votre filtre dans ce module:

 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; }; }); 

Utilisez votre filtre dans le balisage:

 {{myValue | numberFixedLen:4}} 

En gardant le minimum … (fonctionne avec les deux chaînes et les chiffres) Faites une validation si vous devez (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); }; }); 

Si vous le souhaitez encore plus petit et que le navigateur prend en charge la fonction de flèche ou que vous utilisez babel / traceur, cela pourrait être réduit à:

 app.filter('numberFixedLen', ()=>(a,b)=>(1e4+""+a).slice(-b)); 

Html:

 {{myValue | numberFixedLen:4}} 

Remarque: ceci a moins de souplesse et cela ne fonctionnera que pour des nombres inférieurs à 10000 s'il s'agit d'un nombre plus important que vous devriez augmenter à la fois 4 et 1e4 ou utiliser toute autre solution dynamique.
Cela visait à faire le moins possible le plus rapidement possible.

C'est intentionnellement la même chose que faire:

 ("10000"+1234567).slice(-4) // "4567" ("10000"+1234567).slice(-9) // "001234567" 

Code minimum avec la fonction de rembourrage underscore.string et le filtre angular-underscore-string :

Démo de travail dans jsFiddle

Entrée de chaîne angulaire -> filtre angulaire-souligné-chaîne -> 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 

La variable s réfère à la bibliothèque de chaînes. Dans les anciennes versions, vous devrez le remplacer par "_.str", c'est-à-dire. {{ num | _.str: 'pad':[4, '0'] }}

Vous pouvez simplement utiliser le JavaScript pur, tel que

 ('00000'+refCounter).substr(-5,5) 

Pour le rembourrage avec 5 zéros la valeur de refCounter .

REMARQUE: Assurez-vous de vérifier que refCounter n'est pas défini , sinon vous obtiendrez une exception.

Si vous utilisez exclusivement le rembourrage "0" et que vous ne vous attardez pas à adapter vos filtres par un cas d'utilisation, j'irais avec quelque chose de similaire à la réponse de Endless pour la vitesse, mais je vous recommanderais de vous assurer que le numéro n'est pas déjà assez long avec quelque chose comme:

 app.filter('minLength', function () { return function(input,len){ input = input.toString(); if(input.length >= len) return input; else return("000000"+input).slice(-len); } }); 

Comme cela ne l'enregistre pas seulement à partir de chiffres ou de cordes de coupe qui satisfont déjà la longueur minimale qui est importante pour éviter des choses étranges comme:

 {{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code 

Mais en utilisant "000000" au lieu d'un nombre comme 1e6, vous évitez à la fois de modifier la valeur réelle de l'entrée (en ne lui ajoutant pas 1000000) et d'éviter la nécessité de convertir implicitement le nombre en une chaîne, ce qui permet d'enregistrer une étape de calcul compte tenu de l'entrée Serait déjà converti en chaîne pour éviter le problème de coupure mentionné ci-dessus.

Si vous voulez un système qui ne nécessite aucun test de cas d'utilisation plus rapide et plus flexible que la solution de bguiz, j'utilise un filtre comme:

 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; } }; }); 

Cela vous permet de faire la norme:

 {{ 22 | minLength:4 }} //Returns "0022" 

Mais vous donne également la possibilité d'ajouter des options de rembourrage non nulles comme:

 {{ 22 | minLength:4:"-" }} //Returns "--22" 

Et vous pouvez imposer des choses farfelues avec des nombres ou des chaînes comme:

 {{ "aa" | minLength:4:" " }} //Returns " aa" 

De plus, si l'entrée est déjà plus longue que la longueur souhaitée, le filtre va tout simplement revenir en arrière sans aucune coupe:

 {{ 1234567 | minLength:4 }} //Returns "1234567" 

Vous évitez également la nécessité d'ajouter une validation pour len parce que lorsque vous appelez le filtre sans un argument len , angular va lancer un RangeError dans votre console à la ligne où vous essayez de créer un tableau de longueur null ce qui simplifie le débogage.

Utilisez le filtre ci-dessous modifier si nécessaire pour certaines modifications

  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> 

Un autre exemple:

 // 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; }; }); 

Le plus propre serait de créer votre propre filtre en angulaire et de l'utiliser. Il y a déjà quelques réponses à cela, mais personnellement, je trouve cela le plus facile à lire. Créez un tableau selon la longueur des zéros nécessaires puis joignez le tableau avec zéro.

 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; } }); 

Utilisez-le comme:

 {{myValue | customNumber}} 

Je l'ai également fait pour que vous puissiez spécifier les zéros principaux comme paramètre:

 {{myValue | customNumber:5}} 

Démo: http://www.bootply.com/d7SbUz57o8

Il s'agit d'une variante Angular 1.x de la directive dans TypeScript qui traiterait à la fois les nombres entiers et les décimales. Tout est considéré comme «sûr du type» grâce à TS.

 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; } });