Denis Antonenko2014-09-20 01:32:43
Denis Antonenko, 2014-09-20 01:32:43

Angular.js: how to put markup in line at placeholder position?

The project uses a not-so-beautiful solution that we are going to fix. There is an array of objects coming from the server and describing which controls are needed to display and edit the model - these can be either simple controls in the form of input type="text", or more complex ones assembled from several tags, with validation by dynamically loaded lists, etc. . Currently, the markup of these controls is created manually (the file already contains > 4000 lines), but the managers had an idea to fix this crutch using angular.js. The problem is that the application supports localization, and the position of the same textbox is given as a placeholder in a string for a specific locale, for example (pseudocode):

var controlData = {
    'typeOfControl': 'textAndTextbox',
    'label':'Ignore travels under {0} miles',
тут следует код, который в соответствии с typeOfControl вызовет другой метод. 
Тот в свою очередь знает какую разметку нужно собрать, 
берет значение label и подставляет вместо {0} разметку textbox,
привязывает события и изменения value при изменения значения в textbox и добавляет валидацию.

The result is a markup like this:
<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>

Because Since we do it manually, it's not a problem to collect the markup element by element, replacing {0} in the label with the textbox markup. But the problem is that the position of {0} can change depending on the language.
Accordingly, there are 2 questions:
1. Is it possible to implement similar behavior in angular.js?
2. Will it be correct to create a model-view pair for each type of control, or is it worth using a different approach?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
_ _, 2014-09-20

Directives to help you. In the link function of the directive, based on the transferred data, build the input you need.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question