формата запятая в качестве ввода в угловом

Question

В jqxwidget http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnumberinput/index.htm

по умолчанию запятой находятся уже на месте и разделенное подчеркиванием.

то, что я хочу, должно иметь пустое поле и как только пользователь начнет вводить запятую, должен прийти как и когда аналогично F2-ячейке рендеринга.

так, когда наберется 100 должен показать 100 при наборе 10000, он должен показать 10000

также у меня есть угловой в моем приложении, как мы используем jqxwidget в conjucation с таким любым угловым способом также хорошо

один плагин я нашел делает работу, но когда фокус из не при вводе https://www.npmjs.com/package/angular-numeric-directive

Answer 1

Demo

<input value="100000000" id="testInput" /> 

Просто применять этот .formatInput(numberOfCharactersForSeparator, Separator); к введенному

$(document).ready(function() 
{ 
    $("#testInput").formatInput(3,","); 
}); 

, используя этот плагин, который я только что сделал: р

$.fn.formatInput = (function(afterHowManyCharacter,commaType) 
{ 
    if(afterHowManyCharacter && commaType != ".") 
    { 
     var str = $(this).val(); 
     var comma = commaType != undefined ? commaType : "," ; 

     var strMod ; 
     if($(this).val().indexOf(".") == -1) 
      strMod = replaceAll(comma,"",$(this).val()); 
     else 
     { 
      strMod = replaceAll(comma,"",$(this).val()); 
      strMod = strMod.substring(0,strMod.indexOf(".")); 
     } 

     if($(this).val().indexOf(".") != -1) 
      $(this).val(splitByLength(strMod,afterHowManyCharacter).join(comma)+ $(this).val().substring($(this).val().indexOf("."))); 
     else 
      $(this).val(splitByLength(strMod,afterHowManyCharacter).join(comma)); 



     var nowPos = 0; 
     $(this).on("keyup",function(e) 
     { 
      nowPos = doGetCaretPosition($(this)[0]); 
      var codePressed = e.which ; 
      if(" 8 37 38 39 40 46 17".indexOf(" "+codePressed) == -1 && !e.ctrlKey) 
      { 
       if($(this).val().length >afterHowManyCharacter) 
       { 
        strMod ; 
        if($(this).val().indexOf(".") == -1) 
         strMod = replaceAll(comma,"",$(this).val()); 
        else 
        { 
         strMod = replaceAll(comma,"",$(this).val()); 
         strMod = strMod.substring(0,strMod.indexOf(".")); 
        } 

        if($(this).val().indexOf(".") != -1) 
         $(this).val(splitByLength(strMod,afterHowManyCharacter).join(comma)+ $(this).val().substring($(this).val().indexOf("."))); 
        else 
         $(this).val(splitByLength(strMod,afterHowManyCharacter).join(comma)); 

        if((strMod.length-1)%afterHowManyCharacter == 0) 
        { 
         setCursor($(this)[0],nowPos+1); 
        } 
        else 
        { 
         setCursor($(this)[0],nowPos); 
        } 
       } 
      } 
     }); 

    } 
    else if(commaType == ".") 
    { 
     console.log("You can't use . as Separator"); 
    } 

    function splitByLength(str,maxLength) 
    { 
     var reg = new RegExp(".{1,"+maxLength+"}","g"); ; 
     return reverseStringInArray(str.split("").reverse().join("").match(reg).reverse()); 
    } 

    function replaceAll(find, replace, str) { 
     return str.replace(new RegExp(find, 'g'), replace); 
    } 

    function reverseStringInArray(arr) 
    { 
     $.each(arr,function(i,val) 
     { 
      arr[i] = arr[i].split("").reverse().join(""); 
     }); 
     return arr ; 
    } 


    // Author of setCursor is nemisj 
    function setCursor(node,pos) 
    { 
     node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node; 

     if(!node){ 
      return false; 
     }else if(node.createTextRange){ 
      var textRange = node.createTextRange(); 
      textRange.collapse(true); 
      textRange.moveEnd(pos); 
      textRange.moveStart(pos); 
      textRange.select(); 
      return true; 
     }else if(node.setSelectionRange){ 
      node.setSelectionRange(pos,pos); 
      return true; 
     } 

     return false; 
    } 

    // Author of setCursor is bezmax 
    function doGetCaretPosition (oField) { 

     // Initialize 
     var iCaretPos = 0; 

     // IE Support 
     if (document.selection) { 

     // Set focus on the element 
     oField.focus(); 

     // To get cursor position, get empty selection range 
     var oSel = document.selection.createRange(); 

     // Move selection start to 0 position 
     oSel.moveStart ('character', -oField.value.length); 

     // The caret position is selection length 
     iCaretPos = oSel.text.length; 
     } 

     // Firefox support 
     else if (oField.selectionStart || oField.selectionStart == '0') 
     iCaretPos = oField.selectionStart; 

     // Return results 
     return (iCaretPos); 
    } 
}); 

Answer 2

угловых уже обеспечивает довольно основные фильтры форматирования как

html : {{val | number:0}} 
script: $scope.val = 1234.56789; 

исх:

https://docs.angularjs.org/api/ng/filter/number 
https://docs.angularjs.org/api/ng/filter/currency 
https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters 

Answer 3

Привет, Я решил это раньше, создав директиву, которая применяет фильтр к вашему входу HTML. Вот jsfiddle example

Это директива. Он форматирует вход пользователя и удерживает курсор там, где пользователь печатает. Моя единственная проблема с этим - логика, по которой курсор должен быть заострен.

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

     var parts = attrs.format.split(':'); 
     attrs.foramtType = parts[0]; 
     attrs.pass = parts[1]; 

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


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

    } 
}; 

И HTML, чтобы активировать его

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

Answer 4

100 => 100

1000 => 1.000

10000 => 10.000

100000 => 100000

...

10000000 => 10.000.000

10000000,540 => 10000000.540

Я использую нг с переменой событие, чтобы сделать этот пример

 // on-change event 
     $scope.ngchanged = function (val) { 
      $scope.iputval = numberWithCommas(val); 
     }; 

     function numberWithCommas(n) { 

      while (n.toString().indexOf(",") != -1) 
      { 
       n = n.replace(",", ""); 
      } 
      var parts = n.toString().split("."); 
      return parts[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); 
     } 

Используйте его

<input type="text" ng-model="iputval" ng-change="ngchanged(iputval)" /> 

Обновлённые демо и код по следующей ссылке

Полный код и демо >>here

Answer 5

<html> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script> 
var app = angular.module('app',[]); 
app.controller('myCtrl',function($scope){ 
    $scope.name = "1232.33"; 
    $scope.changeFormat = function(value){ 
     $scope.name = Number(value).toLocaleString('en'); 
    } 
}); 
</script> 
<body> 
    <div ng-app="app" ng-controller="myCtrl"> 

    <p>Input something in the input box:</p> 
    <p>Number: <input type="text" ng-model="name" placeholder="Enter name here" ng-blur="changeFormat(name)"></p> 
    <h1>Formatted value {{name}}</h1> 

</div> 

</body> 
</html> 

Answer 6

Это хакерское решение. Идея состоит в том, чтобы следить за изменениями входного текста и соответствующим образом форматировать ввод.

HTML

<div ng-controller="so"> 
    <input ng-model="salary"></input> 
</div> 

Javascript

app.controller('so', function($scope) { 
$scope.salary = '12567'; 
$scope.$watch('salary', function(){ 
    // strip out all the commas and dots 
    var temp = $scope.salary; 
    if (!temp) return; // ignore empty input box 
    var lastChar = temp[temp.length-1]; 
    if (lastChar === ',' || lastChar === '.') // skip it/allow commas 
     return; 
    var a = temp.replace(/,/g,''); //remove all commas 
    //console.log(a); 
    if (isNaN(a)) 
     $scope.salary = temp.substring(0, temp.length-1); // last char was not right 
    else { 
     var n = parseInt(a, 10); // the integer part 
     var f = ''; // decimal part 
     if (a.indexOf('.') >= 0) // decimal present{ 
      if (lastChar === '0') // 0's after decimal point are OK 
       return; 
      f = ('' + parseFloat(a)).substr(a.indexOf('.')); 
     } 
     var formatted_salary = ''; 
     var count = 0; 
     var ns = '' + n; // string of integer part 
     for (var i=ns.length-1; i>=0; i--) { 
      if (count%3===0 && count>0) 
       formatted_salary = ',' + formatted_salary; 
      formatted_salary = ns[i] + formatted_salary; 
      count += 1; 
     } 
     formatted_salary = formatted_salary + (f ? f : ''); 
     $scope.salary = formatted_salary; 

    } 
}) 
}) 

Вот JSFiddle Он изящно обрабатывает такие вещи, как

1. не позволит какой-либо символ актеры, отличные от чисел, и.
2. множественного запятые и точки отформатированы правильно

PS: - вы можете отрегулировать правильное позиционирование каретки самостоятельно с помощью текстового диапазона. Я не включил это здесь.