Javascript 如何在将浮点值重新格式化为小数点后2位后更新回文本框

例如，我试图获取并更新两位小数的数据（float）。我有一个文本框，允许用户输入浮点数，我使用一个指令转换成2个小数点：

<input type="text" ng-model="data" name="data" smart-float />

app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var FLOAT_REGEXP = /^\-?\d+(\.\d+)?$/;

        if (FLOAT_REGEXP.test(viewValue)) {
          ctrl.$setValidity('float', true);
          return parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);
        } else {
          ctrl.$setValidity('float', false);
          return undefined;
        }
      });
    }
  };
});  

应用程序指令（'smartFloat'，函数（）{
返回{
要求：'ngModel'，
链接：函数（范围、elm、属性、ctrl）{
ctrl.$parsers.unshift（函数（viewValue）{
var FLOAT_REGEXP=/^-？\d+（\.\d+）$/；
if（浮点正则表达式测试（viewValue））{
ctrl.$setValidity（'float'，true）；
返回parseFloat（Math.round（viewValue*100）/100）.toFixed（2）；
}否则{
ctrl.$setValidity（'float'，false）；
返回未定义；
}
});
}
};
});  

该指令正常工作，在模型上保留2位小数，问题是当用户单击

check

按钮时，我想更新回文本框，例如：

如果用户在文本框上输入

1.345

，然后单击复选按钮，则值

1.35

应更新回文本框：

有办法吗

我试图使用

$scope.$digest（）

在

checkFn

中触发

$digest

循环，但没有成功

---

我认为您必须使用

ctrl.$setViewValue（）

和

ctrl.$render（）

换行

  return parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);

到

---

有关更多信息，请访问我认为您必须使用

ctrl.$setViewValue（）

和

ctrl.$render（）

换行

  return parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);

到

---

有关更多信息，请访问角度方向代码，以便只允许在文本框中键入2位小数

它会动态更新文本框值

模板代码：

<div ng-controller="Controller">
  <form name="form" class="css-form" novalidate>
    <div>
      Data:
      <input type="text" ng-model="obj.data" name="data" smart-float value="obj.value" />
      {{obj.data}}<br />
      <button ng-click="checkFn(form)">Check</button>
      <span ng-show="isError">
        This is not a valid float number!</span>
    </div>
  </form>
</div>

app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$render = function () {
          var value = ctrl.$viewValue || '';
          elm.val(value);

      }
      ctrl.$parsers.unshift(function(viewValue) {
        var FLOAT_REGEXP = /^\-?\d+(\.\d+)?$/;

        if (FLOAT_REGEXP.test(viewValue)) {
          ctrl.$setValidity('float', true);
          return parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);

        } else {
          ctrl.$setValidity('float', false);
         return undefined;
        }
      });
        elm.bind('keyup', function () {

          scope.$apply(function () {
            console.log(ctrl.$valid)
            if(ctrl.$valid){
              viewValue=ctrl.$viewValue || '';
              ctrl.$setViewValue(parseFloat(Math.round(viewValue * 100) / 100).toFixed(2));
              elm.val(ctrl.$viewValue);
            }else{
              ctrl.$viewValue=''
              elm.val('');

            }
          });
        });
    }
  };
});

---

角度方向代码，只允许在文本框中键入2位小数

它会动态更新文本框值

模板代码：

<div ng-controller="Controller">
  <form name="form" class="css-form" novalidate>
    <div>
      Data:
      <input type="text" ng-model="obj.data" name="data" smart-float value="obj.value" />
      {{obj.data}}<br />
      <button ng-click="checkFn(form)">Check</button>
      <span ng-show="isError">
        This is not a valid float number!</span>
    </div>
  </form>
</div>

app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$render = function () {
          var value = ctrl.$viewValue || '';
          elm.val(value);

      }
      ctrl.$parsers.unshift(function(viewValue) {
        var FLOAT_REGEXP = /^\-?\d+(\.\d+)?$/;

        if (FLOAT_REGEXP.test(viewValue)) {
          ctrl.$setValidity('float', true);
          return parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);

        } else {
          ctrl.$setValidity('float', false);
         return undefined;
        }
      });
        elm.bind('keyup', function () {

          scope.$apply(function () {
            console.log(ctrl.$valid)
            if(ctrl.$valid){
              viewValue=ctrl.$viewValue || '';
              ctrl.$setViewValue(parseFloat(Math.round(viewValue * 100) / 100).toFixed(2));
              elm.val(ctrl.$viewValue);
            }else{
              ctrl.$viewValue=''
              elm.val('');

            }
          });
        });
    }
  };
});

---

我遇到异常：

最大调用堆栈大小超过了

，似乎永远循环我遇到异常：

最大调用堆栈大小超过了

，似乎永远循环不幸的是，演示不允许您在设置后更改该值，例如输入4（4.00）并尝试将其更改为4.01。每次退格时，它都会添加一个0。不幸的是，演示不允许您在设置该值后更改它，例如，输入4（4.00）并尝试将其更改为4.01。每次退格时，它都会添加一个0。