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



Answers

Question

AngularJS가 수행 할 수있는 흥미로운 작업 중 하나는 특정 데이터 바인딩 식에 필터를 적용하는 것입니다. 예를 들어 모델 속성의 문화권 별 통화 또는 날짜 형식을 적용하는 편리한 방법입니다. 범위에서 계산 된 속성을 갖는 것도 좋습니다. 문제는 이러한 기능 중 어느 것도 양방향 데이터 바인딩 시나리오에서 작동하지 않는다는 것입니다. 범위에서보기로 단방향 데이터 바인딩 만 가능합니다. 이것은 훌륭한 도서관에서 눈부신 누락 인 것처럼 보입니다 - 아니면 제가 누락 된 것이 있습니까?

KnockoutJS 에서는 읽기 / 쓰기 계산 된 속성을 만들 수 있습니다.이 속성을 사용하면 속성 값을 가져 오기 위해 호출되는 함수와 속성이 설정 될 때 호출되는 함수를 지정할 수 있습니다. 예를 들어, 사용자가 "$ 1.24"를 입력하고이를 ViewModel의 부동 소수점으로 파싱하고 ViewModel의 변경 사항을 입력에 반영하도록 culture 인식 입력을 구현할 수있었습니다.

이것과 비슷한 찾을 수있는 가장 가까운 것은 $scope.$watch(propertyName, functionOrNGExpression); 의 사용입니다 $scope.$watch(propertyName, functionOrNGExpression); 이렇게하면 $scope 의 속성이 변경 될 때 함수가 호출되도록 할 수 있습니다. 그러나 이것은 예를 들어 문화를 인식하는 입력 문제를 해결하지 못합니다. $watch 메서드 자체 내에서 $watch $watched 속성을 수정하려고 할 때의 문제점을 확인하십시오.

$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 직접 변경하는 내용이 parsedValue . 업데이트되지 않음). 이는 제어기 조치 또는 데이터 서비스의 데이터로드에서 발생할 수 있습니다.

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




Links