Angularjs 用于在输入中将美分显示为美元的角度指令

因此，我必须为货币输入一个值，该值存储为以美分为单位的整数。我有一个指令，几乎有效，但不完全有效。下面的指令成功地将数据从模型转换到视图，并且在更改后，它成功地从返回到模型的内容中去除所有无关的内容。问题在于，当模型更改时，它不会再次更新视图。因此，如果输入显示$10.00，我输入$10.00a，模型将正确显示1000，但a保留在输入字段中

return {
  require: 'ngModel',
  link: function (elem, $scope, attrs, ngModel) {
    ngModel.$formatters.push(function (val) {
      return '$' + (val / 100).toFixed(2);
    });
    ngModel.$parsers.push(function (val) {
      var replaced = val.replace(/[^\d\.]/g, '');
      var split = replaced.split('.');
      var merged = split[0] + split[1].slice(0, 2)
      return Number(merged);
    });
  }
}

---

为了更新

视图值

，您需要在新推出的

解析器中调用这两个函数：

//update the $viewValue
ngModel.$setViewValue(displayedValue);
//reflect on the DOM element
ngModel.$render();

因此，该指令将如下所示：

.directive('myFilter', [
    function() {
            return {
            require: 'ngModel',
                link: function (elem, $scope, attrs, ngModel) {
                    ngModel.$formatters.push(function (val) {
                        return '$' + (val / 100).toFixed(2);
                    });
                    ngModel.$parsers.push(function (val) {
                        //make sure the val is string
                        val = val.toString();
                        //filter the value for displaying, so keep the '$'
                        var displayedValue = val.replace(/[^\d\.\$]/g, '');
                        var replaced = val.replace(/[^\d\.]/g, '');
                        var split = replaced.split('.');
                        var merged = split[0] + split[1].slice(0, 2);
                        var typeConverted = Number(merged);
                        //update the $viewValue
          ngModel.$setViewValue(displayedValue);
          //reflect on the DOM element
          ngModel.$render();
                        return typeConverted;
                    });
                }
            }
        }
])

这里有一把小提琴：

另一个类似的积压职位对需要这两条线的原因有更多的解释：

希望这能对您有所帮助。
非常感谢。你的小提琴有点不对劲，因为它会在显示器上“.xx”之后保留额外的数字和句点，但我问的实际问题已经得到了回答。只需更改displayedValue.：）