Question

我需要这种格式的指令

例如423.33是有效号码423.333无效只允许正数包括0。但是用户不应该输入0423.33

如果它只写没有小数的数字，那么得到如下给出的输出 423格式化为423.00

请记住，不应该使用NEGATIVES，只允许使用decimal max = 2

的数字格式

请帮助我获得这个我是AngularJs的初学者支持我谢谢

这是我的代码问题是在最初运行时我输入两次字符（除了数字），它将允许。对于Eg press＆＃39; W＆＃39;两次它会在那个文本域中进行。请纠正它。我不知道如何在JFiddle中发布它

这是我的代码

的script.js

var myApp = angular.module('myApp', []);

myApp.directive('nksOnlyNumber', function () {
  return {
    restrict: 'EA',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {   
     scope.$watch(attrs.ngModel, function(newValue, oldValue) {
        var spiltArray = String(newValue).split("");

        if(attrs.allowNegative == "false") {
          if(spiltArray[0] == '-') {
        newValue = newValue.replace("-", "");
        ngModel.$setViewValue(newValue);
        ngModel.$render();
          }
        }

        if(attrs.allowDecimal == "false") {
        newValue = parseInt(newValue);
        ngModel.$setViewValue(newValue);
        ngModel.$render();
        }

        if(attrs.allowDecimal != "false") {
          if(attrs.decimalUpto) {
         var n = String(newValue).split(".");
         if(n[1]) {
            var n2 = n[1].slice(0, attrs.decimalUpto);
            newValue = [n[0], n2].join(".");
            ngModel.$setViewValue(newValue);
            ngModel.$render();
         }
          }
        }

        if(attrs.loading=="one"){
         // attr.$set("ngTrim", "false");
          var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
          scope.$watch(attrs.ngModel, function(newValue) {
        if(ngModel.$viewValue.length>limitLength){
          ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
          ngModel.$render();
        }
          });             
        }  


        if (spiltArray.length === 0) return;
        if (spiltArray.length === 1 && (spiltArray[0] == '-' || spiltArray[0] === '.' )) return;
        if (spiltArray.length === 2 && newValue === '-.') return;

          /*Check it is number or not.*/
          if (isNaN(newValue)) {
        ngModel.$setViewValue(oldValue);
        ngModel.$render();
          }
      });
      }
  };
});

view.jsp的

<body data-ng-app="myApp">
        <div class="row">
            <div class="form-group">
                <div class="input-group ">
                    <span class="input-group-addon"> <i class="fa fa-chain-broken"></i>
                    </span> 
                    <b>Number Only</b><br>
                    <input type="text"  nks-only-number ng-model="mynumber"/><br>

                    <b>NumberLimited Only 2 Digits</b><br>
                    <input type="text" nks-only-number ng-model="mynumber6" aw-limit-length="2" loading="one" /><br>

                    <b>Decimal Upto 2</b><br>
                    <input type="text" nks-only-number ng-model="mynumber1" decimal-upto="2" /><br>

                    <b>Allow Negative</b><br>
                <input type="text" nks-only-number ng-model="mynumber2" decimal-upto="2" allow-negative="true" /><br>

                <b>Not Allow Negative</b><br>
                <input type="text" nks-only-number ng-model="mynumber3" decimal-upto="2" allow-negative="false" /><br>

                    <b>Not Allow Decimal</b><br>
                <input type="text" nks-only-number ng-model="mynumber4" allow-decimal="false" /><br>

                <b>Allow Decimal</b><br>
                <input type="text" nks-only-number ng-model="mynumber5" allow-decimal="true" /><br>


                </div>              
            </div>
        </div>
</body>

Answer 1

在您的方案中，您可以使用Number内置过滤器。它会像你期望的那样工作。您应该键入number并设置min=1属性以避免负数。您的HTML代码段将是

<label>Enter number: <input ng-model='val' type="number" min="1"></label>
<span id='number-default'>{{val | number : 2}}</span>

如果用户输入423.333，它将自动转换为2分数大小。因此，您的输出将针对以下定义的某些情况：

0422 => 422.00
000422.33 => 422.33
422.333 => 422.33
422.339 => 422.34

我希望它有所帮助。

Answer 2

如果您希望在输入字段中允许特定模式，请尝试使用ng-pattern。将REGEX用于要匹配的模式。例如：

<input ng-model='val' type="text" ng-pattern="/[^0]\d.(\d{1,2})+/">

查看文档以获取更多帮助https://docs.angularjs.org/api/ng/directive/ngPattern

如何在相应的texfield中使用AngularJS中的数字格式（数字和小数点）？

2 个答案: