是否可以在AngularJS中的视图和模型之间转换值以进行输入？

Question

AngularJS新手.试图找出我将如何实现这一目标,或者是否可能.

我知道我可以通过使用将值绑定到输入框

<input type="number" ng-model="myvalue">

但是如果我想要它,那么模型和视图之间的值会被转换呢？

例如,对于货币,我喜欢将我的价值存储在美分中.但是,我想允许我的用户输入美元金额.所以我需要在视图和控制器之间将值转换为100倍,即在模型中我将有100,并且在视图中,我将有1.

那可能吗？如果是这样,我怎么能实现呢？

Answer 1

我遇到了和你一样的问题.我开始使用wciu的解决方案,但遇到的问题是价值会在美分和美元之间闪烁.我最终挂钩了用于在视图和模型之间进行绑定的管道.

merchantApp.directive('transformTest', function() {
  return { restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      if(ngModel) { // Don't do anything unless we have a model

        ngModel.$parsers.push(function (value) {
          return value*100;
        });

        ngModel.$formatters.push(function (value) {
          return value/100;
        });

      }
    }
  };
});

Answer 2

我只想使用Object.defineProperty来解决这个问题,例如:

var prop = 0;
Object.defineProperty($scope, "prop", {
    get: function () {
        return prop / 100;
    },
    set: function (value) {
        prop = parseInt(value) * 100;
    }
});

变量prop现在总是= $ scope.prop*100.

Answer 3

您可以在输入元素上使用ngChange可选方法来执行一个函数，将用户输入操作为您在每次更改时查找的格式。

    function Ctrl($scope) {
        $scope.valueEntered = '';
        $scope.value = '';

        $scope.valueEnteredChanged = function () {
            // more robust logic here
            $scope.value = $scope.valueEntered * 100;
        }
    }

并带有如下所示的标记。

<div ng-controller="Ctrl">
    <input type="number" ng-model="valueEntered" ng-change="valueEnteredChanged()" /><br />
    <span ng-bind="valueEntered"></span><br />
    <span ng-bind="value"></span>
</div>