재질 디자인 통화 형식으로 입력

재질 디자인에 형식을 매개 변수로 사용하는 입력이 있습니까? 통화 형식이 구체적으로 필요합니다.재질 디자인 통화 형식으로 입력

이 기능을 사용할 수없는 경우이 기능을 구현하기 위해 어떤 방법을 제안 하시겠습니까?

감사합니다.

출처

2016-11-10 dpdragnev

아마 당신에게 10 진수 포맷터를 사용할 수있다. 그런 다음 t 앞에 통화 기호 문자를 넣는다. 그 번호. –

나는 비슷한 것을 시도했지만 그때 입력의 유형을 상하 버튼과 숫자 제한을 잃는 텍스트로 설정해야합니다. – dpdragnev

나는 검도의 숫자 텍스트 상자처럼 더 캡슐화 된 것을 기대하고 있었다. – dpdragnev

당신은 같은 것을 할 통화로 아이콘을 추가 및 마스킹을위한 다음 지시문을 사용할 수

<body ng-controller="MainCtrl" layout="column"> 
    <md-content > 
     <md-input-container class="md-icon-float"> 
     <label>Price</label> 
     <md-icon md-font-icon="fa fa-money"></md-icon> 
     <input currency-mask ng-model="amount" id="sInput" /> 
     </md-input-container> 
    </md-content> 
    </body>

지침

app.directive('currencyMask', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModelController) { 

     var formatNumber = function(value) { 

     value = value.toString(); 
     value = value.replace(/[^0-9\.]/g, ""); 
     var parts = value.split('.'); 
     parts[0] = parts[0].replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, "$&,"); 
     if (parts[1] && parts[1].length > 2) { 
      parts[1] = parts[1].substring(0, 2); 
     } 

     return parts.join("."); 
     }; 
     var applyFormatting = function() { 
     var value = element.val(); 
     var original = value; 
     if (!value || value.length == 0) { 
      return 
     } 
     value = formatNumber(value); 
     if (value != original) { 
      element.val(value); 
      element.triggerHandler('input') 
     } 
     }; 
     element.bind('keyup', function(e) { 
     var keycode = e.keyCode; 
     var isTextInputKey = 
      (keycode > 47 && keycode < 58) || // number keys 
      keycode == 32 || keycode == 8 || // spacebar or backspace 
      (keycode > 64 && keycode < 91) || // letter keys 
      (keycode > 95 && keycode < 112) || // numpad keys 
      (keycode > 185 && keycode < 193) || // ;=,-./` (in order) 
      (keycode > 218 && keycode < 223); // [\]' (in order) 
     if (isTextInputKey) { 
      applyFormatting(); 
     } 
     }); 
     element.bind('blur', function(evt) { 
     if (angular.isDefined(ngModelController.$modelValue)) { 
      var val = ngModelController.$modelValue.split('.'); 
      if (val && val.length == 1) { 
      if (val != "") { 
       ngModelController.$setViewValue(val + '.00'); 
       ngModelController.$render(); 
      } 
      } else if (val && val.length == 2) { 
      if (val[1] && val[1].length == 1) { 
       ngModelController.$setViewValue(val[0] + '.' + val[1] + '0'); 
       ngModelController.$render(); 
      } else if (val[1].length == 0) { 
       ngModelController.$setViewValue(val[0] + '.00'); 
       ngModelController.$render(); 
      } 
      applyFormatting(); 
      } 
     } 
     }) 
     ngModelController.$parsers.push(function(value) { 
     if (!value || value.length == 0) { 
      return value; 
     } 
     value = value.toString(); 
     value = value.replace(/[^0-9\.]/g, ""); 
     return value; 
     }); 
     ngModelController.$formatters.push(function(value) { 
     if (!value || value.length == 0) { 
      return value; 
     } 
     value = formatNumber(value); 
     return value; 
     }); 
    } 
    }; 
});

DEMO

출처

2016-11-10 18:38:43 Sajeetharan

아주 좋습니다. 고마워요. :) – dpdragnev

많은 형제 고마워! – atefth

재질 디자인 통화 형식으로 입력

답변

관련 문제