指令中的SetViewValue不会更新角度模型中的实际值

时间:2018-02-16 06:28:53

标签: angular angularjs-directive

我有一个弹出窗口,在关闭弹出窗口之前输入一个值并保存值。 如果我为输入输入有效金额,则代码可以正常工作。但是如果我输入了无效值(例如:输入金额=' 100美元') 这样可以正确验证并在我的文本框中将值显示为100,但是当我尝试保存该值时,它会以SD 100的形式传递给我的角度模型。

的javascript

angular.module('app').directive('decimalOnly', ['$http', function ($http) {
  return {
    require: '?ngModel',
    scope: {
      allowNegative: '@'
    },

    link: function (scope, element, attrs, modelCtrl) {
      modelCtrl.$parsers.push(function (inputValue) {

        var negative = '';

        if (!inputValue) {
          return '0.00';
        }

        if (attrs.allowNegative == 'true') {
          negative = '\-';
        }

        var regex = new RegExp('[^0-9\.' + negative + ']', '');

        var transformedInput = inputValue.replace(regex, '');
        if (transformedInput != inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
        }

        return transformedInput;
      });
    }
  };
}]);

HTML

<input type="text" class="form-control" data-ng-model="form.amount" decimal-only />

1 个答案:

答案 0 :(得分:0)

试试这可能有帮助

 angular.module('app').directive('decimalOnly', ['$http', function ($http) {
      return {
       require: '?ngModel',
     scope: {
       allowNegative: '@'
      },

      link: function (scope, element, attrs, modelCtrl) {
  modelCtrl.$parsers.push(function (inputValue) {

    var negative = '';

    if (!inputValue) {
      return '0.00';
    }

    if (attrs.allowNegative == 'true') {
      negative = '\-';
    }

    var regex = new RegExp('[^0-9\.' + negative + ']', '');
      if(negative){
         var transformedInput = inputValue.replace(regex, '');
   }
        var transformedInput = inputValue.replace(/\D/g,'');
    var transformedInput = inputValue.replace(regex, '');
    if (transformedInput != inputValue) {
      modelCtrl.$setViewValue(transformedInput);
      modelCtrl.$render();
    }

    return transformedInput;
  });
}

}; }]);