Angularjs 입력 값 형식 지정

Angularjs 입력 값 형식 지정

명령어를 작성하려고 합니다.이 명령어는, 자동적으로 번호의 형식을 지정합니다.<input>모델이 포맷되지 않았습니다.동작시키는 것은 문제 없습니다.로드 시 입력값은 컨트롤러에 1,000,000 및 1000000으로 표시됩니다.단,ngModel.$parsers함수가 기동합니다.그 때 유일하게ngModel.$formattersfire는 디렉티브가 로드되고 값이 0인 경우입니다.

키 누르기에서 작동하려면 어떻게 해야 합니까(키 누르기/키 업에 바인딩을 시도했지만 작동하지 않습니다).

제 코드는 다음과 같습니다.

angular.module('myApp.directives', []).directive('filterInput', ['$filter', function($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            ngModel.$parsers.push(function fromUser(text) {
                return parseInt(text.replace(",", ""));
            });

            ngModel.$formatters.push(function toUser(text) {
                console.log($filter('number')(text));
                return ($filter('number')(text || ''));
            });

        }
    };
}]);

다음 예시는 다음과 같습니다.unshift:

angular.module('myApp.directives', []).directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });


            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
                return plainNumber;
            });
        }
    };
}]);

HTML은 다음과 같습니다.

<input type="text" ng-model="test" format="number" />

데모 참조

도움이 되었으면 좋겠다

이 모듈은 나에게 잘 작동한다.

https://github.com/assisrafael/angular-input-masks

예:

<input type="text" name="field" ng-model="number" ui-number-mask>

아래 Maxim Shoustin의 답변에 대해 이 질문에 대한 답변에 대한 작은 편집:각진JS 포맷터 - 0 대신 공백으로 표시하는 방법

변경은 마지막 번호 삭제 시 입력이 0이 아닌 공백이 되도록 하는 것뿐입니다.

   ctrl.$parsers.unshift(function (viewValue) {
        console.log(viewValue);
        if(viewValue){
            var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter('number')(plainNumber));
            return plainNumber;
        }else{
            return '';
        }
    });

http://jsfiddle.net/2n73j6rb/

저는 다음과 같은 작업을 수행하는 직접 솔루션을 개발했습니다.

1. 포커스로 0.00에 대한 입력을 초기화합니다.
2. Template-Driven 및 ReactiveForm과 호환됩니다.
3. 숫자가 아닌 엔트리를 삭제 또는 취소합니다.
4. 빈 입력을 방지합니다.
5. 123ab4d5, 출력: 12345를 붙여넣습니다.
6. 1000마다 a로 나눕니다.
7. Backspace/Delete 호환.
8. 중간에 입력/삭제합니다.
9. 플러스 int만.

권장:사용자를 특정 길이로 제한하려면 [maxLength]를 사용합니다.

 <input [maxLength]="9" appPriceUsd>

지시사항은 다음과 같습니다.

// Format USD by Reza Taba
import { DecimalPipe } from '@angular/common';
import { Directive, ElementRef, HostListener } from '@angular/core';


@Directive({
  selector: '[appPriceUsd]'
})
export class PriceUsdDirective {
  constructor(private elRef: ElementRef, private decimalPipe: DecimalPipe) { }

  @HostListener('focus') initializeValue(): void {
    if (this.elRef.nativeElement.value === '') {
      this.elRef.nativeElement.value = '0.00';
    }
  }

  @HostListener('keyup') formatUsd(): void {
    let value: string;
    value = this.elRef.nativeElement.value as string;
    value = this.removeNonDigtis(value); // remove all non-digit values
    value = this.addDecimalPoint(value); // Add . to the -2 index
    value = this.applyDecimalPipe(value); // to divide every thousand
    this.elRef.nativeElement.value = value;
  }

  removeNonDigtis(value: string): string {
    let inputArray: string[] = [];
    const digitArray: string[] = [];

    // 12a34b to ["1", "2", "a", "3", "4", "b"]
    inputArray = value.split('');

    // remove any non-digit value
    for (const iterator of inputArray) {
      if (/[0-9]/.test(iterator)) {
        digitArray.push(iterator);
      }
    }

    return digitArray.join('');
  }

  addDecimalPoint(value: string): string {
    const inputArray = value.split(''); // ['0', '.', '0', '0']
    inputArray.splice(-2, 0, '.'); // place decimal in -2
    return inputArray.join('');
  }

  applyDecimalPipe(value: string): string {
    console.log(value);
    return value === '' || value === '.'
      ? '0.00'
      : this.decimalPipe.transform(value, '1.2-2');
  }
}

도움이 됐으면 좋겠다.코딩을 즐겨라.

언급URL : https://stackoverflow.com/questions/19890364/format-input-value-in-angularjs