AngularJS에서 양방향 필터링을 수행하는 방법은 무엇입니까?

AngularJS에서 양방향 필터링을 수행하는 방법은 무엇입니까?

흥미로운 것 중 하나는 앵귤러JS는 특정 데이터 바인딩 표현식에 필터를 적용할 수 있습니다. 이것은 예를 들어, 문화별 통화나 모델 속성의 날짜 형식을 적용하는 편리한 방법입니다.스코프에서 속성을 계산하는 것도 좋습니다.문제는 이러한 두 기능 모두 양방향 데이터 바인딩 시나리오에서는 작동하지 않는다는 것입니다. 즉, 스코프에서 뷰로의 단방향 데이터 바인딩만 가능합니다.이것은 다른 훌륭한 도서관에서 눈에 띄게 누락된 것 같다 - 아니면 내가 뭔가 놓친 것인가?

KnockoutJS에서는 읽기/쓰기 계산 속성을 만들 수 있습니다.이것에 의해, 속성의 값을 취득하기 위해서 호출되는 함수와 속성이 설정되었을 때에 호출되는 함수의 페어를 지정할 수 있습니다.이를 통해 문화 인식 입력을 구현할 수 있었습니다. 예를 들어 사용자가 "$1.24"를 입력하고 이를 View Model에서 플로트로 해석하여 View Model의 변경 사항을 입력에 반영할 수 있습니다.

이와 비슷한 가장 가까운 것은 의 사용법입니다.$scope.$watch(propertyName, functionOrNGExpression);이 기능을 사용하면, 에 있는 속성이$scope변화들.그러나 이것은 예를 들어 문화 인식 입력 문제를 해결할 수 없습니다.수정하려고 하면 문제가 발생한다는 점에 주의해 주세요.$watched내의 재산$watch메서드 자체:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/gyZH8/2/)

사용자가 입력을 시작하면 입력 요소가 매우 혼란스러워집니다.속성을 두 가지 속성으로 분할하여 개선했습니다. 하나는 파싱되지 않은 값이고 다른 하나는 구문 분석된 값입니다.

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/XkPNv/1/)

이것은 첫 번째 버전보다 개선되었지만, 좀 더 상세하게 설명되었으며, 아직 에 대한 문제가 있음을 유의하십시오.parsedValue스코프 변경의 속성(두 번째 입력에 무엇인가를 입력해,parsedValue직접적으로.상단의 입력이 갱신되지 않는 것에 주의해 주세요).이 문제는 컨트롤러 작업 또는 데이터 서비스에서 데이터를 로드하는 경우에 발생할 수 있습니다.

AngularJS를 사용하여 이 시나리오를 구현하는 더 쉬운 방법이 있습니까?설명서에 누락된 기능이 있습니까?

이것에 대한 매우 우아한 해결책이 있는 것으로 밝혀졌습니다만, 잘 문서화되어 있지 않습니다.

값의 은 「」로 할 수 .| θθθθθθθformatter포메터 목록뿐만 아니라 파서 목록도 있는 ngModel이 알고 있습니다.

. 1. 을 사용합니다.ng-model 데이터

<input type="text" ng-model="foo.bar"></input>

2.합니다.2 . 각각모 and and and and and that that that that that that that that that that that that 2 2 2 2 2 2 2 2 2 2 2 2 2 2 。ngModel

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

그 에. 그 안에link를 「」, 「」에 합니다.ngModel

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

을 이미 4.가 합니다.ngModel

<input type="text" lowercase ng-model="foo.bar"></input>

다음 예제에서는 텍스트를 소문자로 변환합니다.input.

모델 컨트롤러용 API 설명서에는 사용 가능한 다른 방법에 대한 간단한 설명과 개요도 나와 있습니다.

언급URL : https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs