1

I'm trying to get and update the data (float) with two decimal places, for example. I have a text-box which allows user to input float number, I use one directive to convert into 2 decimal places:

<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;
        }
      });
    }
  };
});

This directive works okay get 2 decimal places on the model, the thing is I want to update back into the text-box, when user click on check button, example:

if user input 1.345 on the text-box, then click check button, the value 1.35 should update back to the text-box:

enter image description here

Is there any way around?

I tried to trigger $digest loop in checkFn using $scope.$digest() but it does not work out.

The flunker

4

2 回答 2

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;

有关更多信息，请访问文档

于 2013-09-10T11:17:34.117 回答
2

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('');

            }
          });
        });
    }
  };
});
于 2013-09-10T11:56:05.160 回答