добавить дополнительную логику между представлением и моделью в угловых

Question

У меня есть модель, и она может принять одну из двух форм:

{ 
    "x-position" : "center" 
} 

или

{ 
    "x-position" : 20 
} 

Обратите внимание, как в первом примере, x- position - строка, а во втором - целое число. Эти значения привязаны к вводу текста текста типа HTML. Я не могу использовать ввод типа «число», потому что тогда он ошибся, если попытается интерпретировать «центр». Поэтому я должен использовать текст.

Если мы посмотрим на втором примере, если пользователь изменяет значение 25, так как вход HTML элемент имеет тип текста, моя модель в настоящее время:

{ 
    "x-position" : "25" 
} 

Проблема является ввод текста имеет теперь изменил тип значения x-позиции в моей модели от целого числа до строки (от 20 до «25»), что нежелательно. Это связано с тем, что я вынужден установить тип ввода в «текст», хотя я хочу разрешить как текст, так и число, что невозможно. Я бы не прочь принять только строку, пока я могу каким-то образом манипулировать строкой и преобразовывать ее в число, прежде чем передавать ее обратно в мою модель.

Возможно ли добавить дополнительный слой логики между представлением и моделью, так что если пользователь вводит значение «25px», я могу затем вырезать «px», а затем parseInt («25 "), затем передать это значение в мою модель как целое число ... существует ли такая вещь в Angular?

Один из подходов, который я пробовал, я установил $ watch на x-координату и добавил некоторую логику, когда значение изменяется с помощью ввода пользователем. Это работает в небольшом масштабе для предсказуемых данных. Однако проблема заключается в том, что моя модель динамична, постоянно меняется, и у нее могут быть сотни «x-позиций», которые мне придется наблюдать. Добавление часов к такому большому количеству динамических данных кажется мне неосуществимым ... если я не ошибаюсь.

Благодаря

Answer 1

Я думаю, что у вас есть 2 подхода здесь:

1. Если вам нужно только преобразовать в число, когда вы сохраните данные, а затем просто преобразовать его один раз, когда вы сохраняете
2. Если вам действительно нужно преобразовать его каждый раз, когда пользователь меняет ввод (хотя я не вижу случая, когда это потребуется), тогда вы можете либо определить часы, как вы уже сделали, либо вы можете поставить ng-change или ng-blur на входе. (который в конечном итоге также определит часы, но, по крайней мере, таким образом, у вас есть больше контроля над тем, что вы передаете функции)