angularjs input type =“number”不显示带小数的负数

时间:2014-09-29 07:59:53

标签: html5 angularjs

当尝试将带小数部分的负数输入到绑定到带有angularjs的值的数字类型的输入字段时,当小数字符是逗号时,该值将转换为NaN(在我的国家/地区是标准的)。代码非常简单:

<form>
      <input type="number" ng-model="positiveMoney" />
      {{positiveMoney}}
      </br>
      <input type="number" ng-model="negativeMoney" />
      {{negativeMoney}}
</form>

app.controller('MainCtrl', function($scope) {
  $scope.positiveMoney = 99.89;
  $scope.negativeMoney = -99.89;
});

我已经设置了plunker

演示此行为。首次运行plunker时,值会正确显示(并以逗号作为分隔符),但删除减号并重新输入时,该值不再是数字。我使用angularjs v1.2和谷歌浏览器作为我的浏览器。另一方面,当我用小数点替换逗号时,值正确显示,但这不是我所在国家(克罗地亚)的标准语言环境。

修改

最终(在Maxim Shoustin的建议的帮助下)以一种务实的方式解决了这个问题plunker

app.directive('money', ['$filter',
  function($filter) {

    var MONEY_REGEXP = /^\-?\d+((\.|\,)\d{1,2})?$/;
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if (MONEY_REGEXP.test(viewValue)) {
            ctrl.$setValidity('float', true);
            if (typeof viewValue === "money")
              return viewValue;
            else
              return parseFloat(viewValue.replace(',', '.'));
          } else {
            ctrl.$setValidity('money', false);
            return undefined;
          }
        });
      }
    };
  }
]);

该指令接受逗号和点作为小数分隔符。小数点后也只允许两位数。

0 个答案:

没有答案
相关问题