Можно ли преобразовать значение между представлением и моделью в AngularJS для ввода?

Новый для AngularJS. Попытка выяснить, как я это выполнил, или если это возможно вообще.

Я знаю, что я могу связать значение с полем ввода с помощью

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

Но что, если я хочу так, чтобы значение между моделью и представлением трансформировалось?

Например, для валюты мне нравится хранить свою стоимость в центах. Однако я хочу, чтобы мои пользователи вводили суммы в долларах. Поэтому мне нужно преобразовать значение в 100 раз между представлением и контроллером, т.е. В модели у меня было бы 100, и в представлении у меня было бы 1.

Это возможно? Если да, то как я могу это достичь?

Ответы

Ответ 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;
        });

      }
    }
  };
});

Ответ 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.

Ответ 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>

Ответ 4

$смотрите значение модели/доллара и сохраняйте свойство центов:

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

Разметка:

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

Ответ 5

Узнал, как это сделать с помощью директивы, использующей NgModelController с этой страницы http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

В принципе, следующая директива будет умножать/делить на 100 для поля ввода с transformTest в качестве атрибута.

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);
      }
    }
  };
});