javascript - 将 float 重新格式化为 2 位小数后如何更新回文本框

Question

例如，我正在尝试获取和更新具有两位小数的数据( float )。我有一个允许用户输入 float 的文本框，我使用一个指令将其转换为小数点后两位:

<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

Answer 1

Angular direcitve 代码只允许在文本框中输入 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('');

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