dabrahabra
@dabrahabra
.NET Developer

Angular.js: как подставить разметку в строку на позицию placeholder?

В проекте используется не совсем красивое решение, которой мы собираемся исправить. Есть массив объектов приходящий с сервера и описывающий какие контролы нужны для отображения и редактирования модели - это могут быть как простые контролы в виде input type="text", так и более сложные собранные из нескольких тегов, с валидацией динамически подгружаемыми списками и т.д. В настоящее время разметка этих контролов создается в ручную (файл уже содержит > 4000 строк), но у менеджеров родилась идея исправить этот костыль используя angular.js. Проблема в том что приложение поддерживает локализацию, и позиция того же textbox задается в виде placeholder в строке для конкретной локали, например (псевдокод):
var controlData = {
    'typeOfControl': 'textAndTextbox',
    'name':'underMiles',
    'label':'Ignore travels under {0} miles',
    'value':'123'
};
/*
тут следует код, который в соответствии с typeOfControl вызовет другой метод. 
Тот в свою очередь знает какую разметку нужно собрать, 
берет значение label и подставляет вместо {0} разметку textbox,
привязывает события и изменения value при изменения значения в textbox и добавляет валидацию.
*/

В итоге получится разметка следующего вида:
<div id="c_underMiles">
    <span class='label'> Ignore travels under </span>
    <input  id="c_underMiles_textbox" type="text" value="123" />
    <span class="label">miles</span>
</div>

Т.к. мы делаем это вручную, то не проблема собрать разметку по элементам, подменяя {0} в label на разметку textbox. Но проблема в том, что позиция {0} может меняться в зависимости от языка.
Соответственно есть 2 вопроса:
1. Можно ли реализовать подобное поведение в angular.js?
2. Правильно ли будет создавать по паре модель-представлении для каждого типа контрола или стоит использовать другой подход?
  • Вопрос задан
  • 2549 просмотров
Пригласить эксперта
Ответы на вопрос 1
AMar4enko
@AMar4enko
Директивы вам в помощь. В функции link директивы исходя из переданных данных строите инпут, какой нужен.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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