是否可以在 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>

Answer 4

从这个页面 http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController 了解如何使用 NgModelController 的指令来执行此操作

基本上，以下指令将对带有 transformTest 作为属性的输入字段乘以/除以 100。

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

      ngModel.$render = function () {
        element.val(ngModel.$viewValue / 100);
      }

      element.bind('blur keyup change', function() {
        scope.$apply(read);
        ngModel.$render();
      }); 

      read();

      function read() {
        ngModel.$setViewValue(element.val() * 100);
      }
    }
  };
});

Answer 5

$观察模型/美元价值并保持美分财产同步：

function MyCtrl($scope) {
    $scope.$watch('dollars', function(dollars) {
        $scope.cents = $scope.dollars * 100;
    })
}​

标记：

<input type="number" ng-model="dollars">
<br>{{dollars}} {{cents}}