重新格式化浮点数后如何更新回文本框到小数点后两位答案

【问题标题】：How to update back to the text-box after re-format float into 2 decimal places重新格式化浮点数后如何更新回文本框到小数点后两位
【发布时间】：2013-09-10 10:32:31
【问题描述】：

例如，我正在尝试获取和更新带有两位小数的数据（浮点数）。我有一个允许用户输入浮点数的文本框，我使用一个指令转换为 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;
        }
      });
    }
  };
});

这个指令可以在模型上得到 2 个小数位，当用户点击 check 按钮时，我想更新回文本框，例如：

如果用户在文本框中输入1.345，然后单击检查按钮，值1.35 应该会更新回文本框：

有什么办法吗？

我尝试使用$scope.$digest() 在checkFn 中触发$digest 循环，但没有成功。

flunker

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

Angular 指令代码只允许在文本框中输入 2 个小数

Working Demo

它会即时更新文本框的值

模板代码：

<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。

【解决方案2】：

我认为你必须使用ctrl.$setViewValue() 和ctrl.$render()

换行

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

到

var transformedInput = parseFloat(Math.round(viewValue * 100) / 100).toFixed(2);
ctrl.$setViewValue(transformedInput);
ctrl.$render();
return transformedInput;

欲了解更多信息，请访问docs

【讨论】：

我遇到了异常：Maximum call stack size exceeded，似乎它会永远循环