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

$model/dollar 値を監視し、cents プロパティを同期させます。

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

マークアップ:

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