Как сделать двустороннюю фильтрацию в AngularJS?
Одна из интересных вещей, которые может сделать AngularJS, - это применить фильтр к конкретному выражению привязки данных, что является удобным способом применить, например, специфическую для культуры валюту или форматирование даты свойств модели. Также хорошо иметь вычисленные свойства в области видимости. Проблема заключается в том, что ни одна из этих функций не работает с двусторонними сценариями привязки данных - только односторонняя привязка данных из области действия к представлению. Кажется, это явное упущение в отличной библиотеке - или я что-то упустил?
ВKnockoutJSЯ мог бы создать вычисляемое свойство для чтения / записи, которое позволило бы мне указать пару функций, одну из которых вызывали для получения значения свойства, а другую вызывали при установке свойства. Это позволило мне реализовать, например, ввод с учетом культуры, предоставив пользователю тип «$ 1,24». и синтаксический анализ в плавающей точке во ViewModel, и изменения во ViewModel отражены во входных данных.
Самое близкое, что я мог найти подобное, это использование$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? Мне не хватает некоторых функций в документации?