重新格式化為2位小數后，如何更新回文本框

Question

我試圖獲取並更新數據（浮點數），例如，兩位小數。 我有一個允許用戶輸入浮點數的文本框，我使用一個指令轉換為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循環，但它沒有用完。

不知所措

Answer 1

我想你必須使用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

Answer 2

Angular direcitve代碼，只允許在文本框中輸入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('');

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