@Whitefoot

Как на AngularJS динамически копировать значение поля в другое поле с фильтром?

Добрый день. Есть такая задача:
Пользователь вводит в текстовое поле значение. Поле описывается моделью $scope.field.
Динамически в другом поле обновляется значение при этом обновляется значение $scope.field_t и применяется фильтр somefilter. При этом нельзя использовать жесткие привязки к свойствам модели, потому что поля могут быть разные, а поведение такое задается в шаблоне.
Например так:
<input name="master" type="text" ng-model="$socpe.field" />
<input name="slave" type="text" ng-model="$socpe.field_t" />

Было бы круто если бы можно было написать вот так, но это невалидное выражение для ng-model:
<input name="master" type="text" ng-model="$socpe.field" />
<input name="slave" type="text" ng-model="$socpe.field_t = $socpe.field | somefilter" />

Есть ли какое-нибудь более-менее изящное решение этой задачи? Спасибо.
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 3
miraage
@miraage
Старый прогер
Логика не должна храниться в шаблоне.
Используйте директивы.
Ответ написан
Комментировать
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
фильтровать в контроллере по изменению свойства и записывать в другое, либо же сделать директиву которая будет добавлять свой formatter.
Ответ написан
Комментировать
@Whitefoot Автор вопроса
Реализовал на скорую руку пока вот такую директиву:
function ($filter) {
    return {
        scope: {
            master: '@',
            slave: '@',
            filter: '@',
            filterAttr: '@'
        },
        link: function (scope, element, attr) {
            if (typeof attr.master != 'string' || typeof attr.slave != 'string')
                return;
            scope.$parent.$watch(attr.master, function(val){
                if (val){
                    if (attr.filter){
                        try{
                            val = $filter(attr.filter)(val, attr.filterAttr);
                        }catch(e)
                        {}
                    }
                    scope.$parent.$eval(attr.slave+ "='" + val + "'");
                }
            });
        },
        restrict: 'A'
    };
}

Соответственно в шаблоне так задаю:
<input type="text" readonly data-transfer-value data-master="prop1.prop1_1.prop1_2"
                              data-slave="prop2.prop2_1.prop2_2"
                              data-filter="somefilter"
                              ng-value="prop1.prop1_1.prop1_2 | somefilter" />
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы