Angular에서 뷰와 모델 사이의 값을 변환할 수 있습니까?입력용 JS?

Angular에서 뷰와 모델 사이의 값을 변환할 수 있습니까?입력용 JS?

AngularJS의 신기능내가 이걸 어떻게 해낼지, 아니면 그게 가능한지 알아내려고 노력 중이야.

다음을 사용하여 입력 상자에 값을 바인딩할 수 있습니다.

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

그러나 모델과 뷰 사이의 값이 변환되도록 하려면 어떻게 해야 합니까?

예를 들어, 통화의 경우, 저는 제 가치를 센트로 저장하는 것을 좋아합니다.다만, 유저에게 달러 금액을 입력할 수 있도록 하고 싶습니다.따라서 뷰와 컨트롤러 간에 값을 100배 변환해야 합니다. 즉, 모델에서는 100배, 뷰에서는 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;
        });

      }
    }
  };
});

이 문제를 해결하려면 Object.defineProperty를 사용합니다.다음은 예를 제시하겠습니다.

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

변수 프로포트는 항상 = $180.prop * 100입니다.

입력 요소에 대한 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>

이 페이지에서 NgModelController를 사용한 디렉티브를 사용하는 방법에 대해 알아보겠습니다.http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

기본적으로 다음 지시어는 변환이 있는 입력 필드에 대해 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);
      }
    }
  };
});

$모델/달러 가치를 확인하고 cents 속성을 동기화합니다.

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

마크업:

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

언급URL : https://stackoverflow.com/questions/13420693/is-it-possible-to-transform-a-value-between-view-and-model-in-angularjs-for-inpu