it-swarm.asia

كيف يمكنني استخدام مرشح AngularJS لتنسيق رقم ليكون له أصفار بادئة؟

راجعت الوثائق . ما أوده هو أن يكون لأرقامي أربعة أرقام وأصفار بادئة.

22 to 0022
1  to 0001

هل يمكن لشخص ما أن يخبرني إذا كان ذلك ممكنًا مع الرقم أو أي نوع آخر من المرشحات؟

59
Alan2

لا يوجد مرشح مطلوب ، ما عليك سوى استخدام تعبير في html

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

{{("00000"+123456).slice(-6)}} // '123456'
91
allenhwkim

لنفترض أن لديك وحدة نمطية تسمى myModule في تطبيقك myApp:

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

حدد الفلتر في هذه الوحدة:

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

استخدم الفلتر في الترميز:

{{myValue | numberFixedLen:4}}
62
bguiz

الحفاظ على الحد الأدنى ... (يعمل مع كل من السلاسل والأرقام) قم ببعض التحقق من الصحة إذا كان عليك (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);
    };
});

إذا كنت تريد أن تكون أصغر حجمًا ويدعم المتصفح وظيفة السهم أو إذا كنت تستخدم babel/traceur ، فيمكن تقليصه إلى:

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

أتش تي أم أل:

{{ myValue | numberFixedLen:4 }}

ملاحظة هذا أقل مرونة وسيعمل هذا فقط على الأرقام الأقل من 10000 إذا كان الرقم أكبر ، فستحتاج إلى زيادة كل من 4 و 1e4 أو استخدام أي حل ديناميكي آخر.
هذا كان المقصود به القيام بأقل قدر ممكن بأسرع وقت ممكن.

إنه نفس الشيء عن قصد:

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

تحديث يمكنك أيضًا استخدام padStart (لكنها لا تعمل في IE)

// app.filter('numberFixedLen', () => (a, b) => ("" + a).padStart(b, 0))

console.log("1234567".padStart(4, 0)) // "1234567"
console.log("1234567".padStart(9, 0)) // "001234567"
45
Endless

رمز الحد الأدنى مع underscore.string 's الحشو الدالة و عامل التصفية سلسلة الزاوي :

العمل التجريبي في jsFiddle


الزاوي إدخال سلسلة -> الزاوي - تسطير أسفل السطر تصفية -> 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 إلى مكتبة السلسلة. في الإصدارات القديمة ، قد تضطر إلى استبدالها بـ "_.str" ، أي. {{ num | _.str: 'pad':[4, '0'] }}

8
Benny Bottema

إذا كنت تتعامل بشكل حصري مع حشوة "0" ولا تمانع في تصميم فلاترك حسب حالة الاستخدام ، فسأذهب إلى شيء مشابه لإجابة Endless للسرعة ولكنني أوصي بأن تتأكد من أن الرقم ليس طويلًا بالفعل بما يكفي مع شيء ما مثل:

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

لأن هذا لن يحفظه فقط من قطع الأرقام أو الأوتار التي تلبي بالفعل الحد الأدنى للطول وهو أمر مهم لتجنب الأشياء الغريبة مثل:

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

ولكن باستخدام "000000" بدلاً من رقم مثل 1e6 ، يمكنك تجنب تغيير القيمة الفعلية للمدخل (عن طريق عدم إضافة 1000000 إليه) وتجنب الحاجة إلى تحويل الرقم ضمنيًا إلى سلسلة وبالتالي حفظ خطوة حسابية مع مراعاة الإدخال سيكون بالفعل تحويلها إلى سلسلة لتجنب مشكلة لقطة المذكورة أعلاه.

إذا كنت تريد نظامًا لا يحتاج إلى أي اختبار لحالة الاستخدام يكون أسرع وأكثر مرونة من حل bguiz ، فإني أستخدم مرشحًا مثل:

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"

ولكن يمنحك أيضًا خيار إضافة خيارات غير صفرية مثل:

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

ويمكنك فرض أشياء أحمق بأرقام أو سلاسل مثل:

{{ "aa" | minLength:4:"&nbsp;" }} //Returns "  aa"

بالإضافة إلى ذلك ، إذا كان الإدخال أطول بالفعل من الطول الذي تريده ، فسيقوم المرشح فقط بإعادة الظهور دون أي تشذيب:

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

يمكنك أيضًا تجنب الحاجة إلى إضافة التحقق من الصحة لـ len لأنه عند استدعاء عامل التصفية دون وسيطة len ، ستقوم الزاويّة بإلقاء RangeError في وحدة التحكم الخاصة بك في السطر حيث تحاول إنشاء صفيف من الطول null مما يجعل من السهل تصحيحه.

6
makewavesnotwar

يمكنك فقط استخدام جافا سكريبت نقية مثل

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

للحشو مع 5 أصفار قيمة refCounter .

ملاحظة: تأكد من التحقق من ذلك refCounter ليس غير محدد ، وإلا فسوف تحصل على استثناء.

5
Marco

الثابتة والمتنقلة استخدام تعديل مرشح أدناه إذا لزم الأمر لبعض التعديلات

  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>
3
Ajay Beniwal

مثال آخر:

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

هذا هو Angular 1.x البديل من التوجيه في TypeScript التي من شأنها التعامل مع كل من الأعداد الصحيحة والكسور العشرية. كل شيء يعتبر "من النوع الآمن" بفضل 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;
        }
    });
0
James Gray

أنظف سيكون لإنشاء مرشح الخاصة بك في الزاوي واستخدامه. هناك بالفعل بعض الإجابات لهذا ولكنني شخصيا أجد هذا أسهل في القراءة. قم بإنشاء مصفوفة بطول الأصفار اللازمة ثم انضم إلى المصفوفة بصفر.

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

0
Arne H. Bitubekk

لقد مددت @ bguiz's answer لتكون قادرًا على التعامل مع المصفوفات ، والتي كانت مطلبتي لاستخدام الفلتر على 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;
  };
});
0
zeropublix