41

AngularJS 的新手。试图弄清楚我将如何做到这一点，或者是否有可能。

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

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

但是如果我想要模型和视图之间的值被转换怎么办？

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

那可能吗？如果是这样，我该如何实现？

4

5 回答 5

51

我遇到了和你一样的问题。我开始使用 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;
        });

      }
    }
  };
});
于 2013-09-11T14:13:44.407 回答
8

我只会使用 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。

于 2014-04-09T15:14:32.543 回答
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);
      }
    }
  };
});
于 2012-11-17T04:18:45.867 回答
4

您可以在输入元素上使用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>
于 2012-11-16T17:33:05.980 回答
3

$watch the model/dollar value and keep a cents property in synch:

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

Markup:

<input type="number" ng-model="dollars">
<br>{{dollars}} {{cents}}
于 2012-11-16T23:54:33.567 回答