Comment utiliser un filtre AngularJS pour formater un nombre avec des zéros non significatifs?
J'ai vérifié la documentation . Ce que je voudrais, c'est que mes numéros aient quatre chiffres et des zéros à gauche.
22 to 0022
1 to 0001
Quelqu'un peut-il m'aider et me dire si cela est possible avec le nombre ou un autre type de filtre?
Aucun filtre requis, utilisez simplement une expression dans votre code HTML
{{("00000"+1).slice(-6)}} // '000001'
{{("00000"+123456).slice(-6)}} // '123456'
Supposons 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}}
Garder le minimum ... (fonctionne avec les deux chaînes et les nombres) 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 et que le navigateur prend en charge la fonction de flèche ou que vous utilisez babel/traceur, vous pouvez le réduire à:
app.filter('numberFixedLen', ()=>(a,b)=>(1e4+""+a).slice(-b));
html:
{{myValue | numberFixedLen:4}}
Remarque Cela a moins de flexibilité et cela ne fonctionnera que pour les nombres inférieurs à 10000 si vous devez augmenter le nombre, il vous faudra augmenter 4 et 1e4 ou utiliser une autre solution dynamique.
Ceci était destiné à 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 underscore.string 's padding function et le filtre angular-underscore-string :
entrée de chaîne angulaire -> filtre angular-underscore-string -> 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 fait référence à la bibliothèque de chaînes. Dans les anciennes versions, vous devrez peut-être le remplacer par "_.str", c'est-à-dire. {{ num | _.str: 'pad':[4, '0'] }}
Si vous traitez exclusivement avec un remplissage "0" et que cela ne vous dérange pas d'adapter vos filtres par cas d'utilisation, j'utiliserais une solution similaire à celle de Endless pour la rapidité, mais je vous recommanderais de vous assurer que le nombre n'est pas 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);
}
});
Cela évitera non seulement de couper des nombres ou des chaînes qui satisfont déjà à la longueur minimale, ce qui est important pour éviter des choses étranges telles que:
{{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code
Mais en utilisant "000000" au lieu d'un nombre tel que 1e6, vous évitez à la fois de modifier la valeur réelle de l'entrée (en n'y ajoutant pas 1000000) et évitez la nécessité de convertir implicitement le nombre en chaîne, ce qui enregistre une étape de calcul tenant compte de l'entrée. serait déjà converti en chaîne pour éviter le problème de découpage mentionné ci-dessus.
Si vous souhaitez un système ne nécessitant aucun test de cas d'utilisation, à la fois plus rapide et plus flexible que la solution de bguiz, j'utilise un filtre tel que:
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 remplissage non nulles telles que:
{{ 22 | minLength:4:"-" }} //Returns "--22"
et vous pouvez appliquer des trucs loufoques 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 la repiquera sans aucun ajustement:
{{ 1234567 | minLength:4 }} //Returns "1234567"
Vous évitez également la nécessité d'ajouter une validation pour len car, lorsque vous appelez le filtre sans l'argument len, angular lancera un RangeError dans votre console à la ligne où vous essayez de créer un tableau de longueur null, ce qui facilite le débogage.
Vous pouvez simplement utiliser du JavaScript pur tel que
('00000'+refCounter).substr(-5,5)
pour un remplissage avec 5 zéros, la valeur de refCounter .
REMARQUE: Assurez-vous de vérifier que refCounter n'est pas undefined , sinon vous obtiendrez une exception.
Pls utiliser 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;
};
});
Il s'agit d'une variante 1.x angulaire de la directive dans TypeScript qui gérerait à la fois les entiers et les décimales. Tout est considéré 'type safe' 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;
}
});
Le plus propre serait de créer votre propre filtre en mode angulaire et de l’utiliser. Il y a déjà quelques réponses à cela, mais personnellement, je trouve cela plus facile à lire. Créez un tableau en fonction de la longueur des zéros nécessaires, puis rejoignez 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 aussi fait pour que vous puissiez spécifier les zéros en tête en tant que paramètre:
{{myValue | customNumber:5}}
J'ai étendu @ bguiz answer pour pouvoir gérer les tableaux, ce qui était nécessaire pour utiliser le filtre sur ng-options:
app.filter('numberFixedLen', function () {
return function (p, len) {
function toFixedLength(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;
}
if (p.length) {
for (var i = 0; i < p.length; i++) {
p[i] = toFixedLength(p[i], len);
}
} else {
p = toFixedLength(p, len);
}
return p;
};
});