AngularJS 10진수 입력: 쉼표를 점으로 변경

AngularJS 10진수 입력: 쉼표를 점으로 변경

Angular에서 10진수 입력을 처리하는 데 사용 중입니다.JS.

를 사용하는 경우maxDecimals옵션은 거의 예상대로 동작합니다.소수점 두 개일 경우 "100.333"과 같은 입력이 "100.33"으로 변환됩니다.

내 지역에서는 쉼표가 소수 구분자로 사용되지만, 내 웹사이트의 입력은 이 플러그인과 같이 점을 소수 구분자로 사용해야 합니다.괜찮아요.다만, 「100,33」과 같은 입력은 「100.33」으로 변환해 주었으면 합니다.

내가 어떻게 그럴 수 있을까?

에 익숙하지 않은 것 같습니다.FCSA number:(

단, 고객의 요구에 적합한 심플하고 각도 지향적인 솔루션을 구현하는 방법을 이해하는 것이 목표인 경우, 계속 읽어보십시오.아래에 있습니다.price내가 플런커에 구현한 지시문.이 방법은 매우 간단합니다.또한 시간을 들여서 이 방법을 학습한 후 양쪽에서 영감을 얻어 독자적인 솔루션을 구현할 것을 권장합니다.price디렉티브와FCSA소스 코드

---

1. a filter쉼표를 10진수로 변환하려면:

   app.filter('comma2decimal', [
   function() { // should be altered to suit your needs
       return function(input) {
       var ret=(input)?input.toString().trim().replace(",","."):null;
           return parseFloat(ret);
       };
   }]);
   

이 필터는 데이터를 보기 형식(쉼표 포함)에서 모델 형식(소수점 포함 스코프)으로 자동 변환합니다.

---

2. a filter10진수를 쉼표로 변환하려면:

   app.filter('decimal2comma', [
   function() {// should be altered to suit your needs
       return function(input) {
           var ret=(input)?input.toString().replace(".",","):null;
           if(ret){
               var decArr=ret.split(",");
               if(decArr.length>1){
                   var dec=decArr[1].length;
                   if(dec===1){ret+="0";}
               }//this is to show prices like 12,20 and not 12,2
           }
           return ret;
       };
   }]);
   

이 필터는 자동으로 모델 형식(스코프, 소수점 포함)에서 보기 형식(보기, 쉼표 포함)으로 데이터를 변환합니다.

---

3. a directive다음 두 가지 필터를 사용하는 지정 가격:

   app.directive('price', ['$filter',
   function($filter) {
   return {
       restrict:'A',
       require: 'ngModel',
       link: function(scope, element, attrs, ngModelController) {
           ngModelController.$parsers.push(function(data) {
               //convert data from view format to model format
   
               data=$filter('comma2decimal')(data);
   
               return data;
           });
   
           ngModelController.$formatters.push(function(data) {
               //convert data from model format to view format
   
               data=$filter('decimal2comma')(data);
   
               return data;
           });
       }
   };}]);
   

---

모든 것이 어떻게 연동되는지 보여 주는 이 작업용 플런커를 보십시오.

처음에 숫자(예: 데이터베이스에서 가져온 값)는 컨트롤러 범위에서 10진수 값($125.price=25.36;)을 가집니다.

뷰에서는 입력에서는 25,36, 데이터베이스에서는 25.36과 같이 표시됩니다.

임의의 쉼표 번호를 입력합니다.데이터베이스에 삽입하기 위해 자동으로 10진수로 변환됩니다.

이게 당신의 질문에 답하길 바랍니다.

---

지침 사용의 이점: 웹 사이트에서 필요한 모든 장소에서 재사용할 수 있습니다.

두 가지 필터를 사용하는 장점: 관심사 분리.

---

이 방법을 사용하면 사용자가 보기에서 가장 익숙한 번호를 사용할 수 있습니다.단, 입력된 번호는 데이터베이스에 삽입하기 전에 백그라운드에서 변경할 수 있으므로 형식이 올바르게 지정됩니다.

또한 데이터베이스에서 가격/숫자를 가져오면 자동으로 변경되어 보기에 더 적합한 방식으로 표시됩니다.

FCSA번호 지시문을 사용하면 필터에 쉽게 추가할 수 있습니다.

기능과 할 수 .ngModelCtrl.$setValidity.

대응하는 로케일을 추가합니다.

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.0/angular-locale_en-us.min.js"></script>

이용 가능한 로케일의 리스트는, https://cdnjs.com/libraries/angular-i18n 에서 확인할 수 있습니다.

앵귤러만 쓰면 돼요.number 및그룹 및

app.run(["$locale", function ($locale) {
    $locale.NUMBER_FORMATS.GROUP_SEP = " ";
    $locale.NUMBER_FORMATS.DECIMAL_SEP = ".";
}]);

다음으로 HTML에서 다음을 수행합니다.

<p>{{ the_number | number:0 }}</p>

나는 비정통적인 해결책을 사용했다.Angular의 .js에서 "DECIMAL_SEP"를 찾아 변경했습니다.

DECIMAL_SEP:".",GROUP_SEP:","

로.

DECIMAL_SEP:",",GROUP_SEP:"."

그리고 효과가 있어! 최선의 해결책은 아니지만 효과가 있어...난 그저 도와주고 싶다.

추신. 콜롬비아에서 왔는데 영어가 서툴러서 죄송합니다.

지름길:

app.filter('commaToDecimal', function(){
    return function(value) {
        return value ? parseFloat(value).toFixed(2).toString().replace('.', ',') : null;
    };
});

솔루션:

.filter('dot2comma', [
  function() {
    return function(value) {
      return value.toString().replace(/\./g,',');
    };
  }]);

언급URL : https://stackoverflow.com/questions/29077210/angularjs-decimal-input-change-comma-to-dot