Как динамически добавлять поля в компонент "dialog" в Lumx

[okuznetsov1]

Сейчас у меня во frontend статически прописаны все элементы input type="text", а требуется сделать, чтобы эти элементы формировались динамически. Проблем с тем, где взять "Name", "Id" и "остальные атрибуты и параметры элементов" - нет, они содержатся в массиве с js-объектами.

Интересует методика/подход с помощью которого это реализовывается в angular, как вариант например такой: может быть формировать .tpl, а затем его подгружать?

Вот так во frontend статически прописаны все элементы input:

<lx-dialog id="{{ dialogIdAdd }}">
    <lx-dialog-header>
        <div class="toolbar bgc-primary pl++">
            <span class="toolbar__label tc-white fs-title">
                Добавление
            </span>
            <div class="toolbar__right">
                <lx-button lx-size="l" lx-color="white" lx-type="icon" lx-dialog-close>
                    <i class="mdi mdi-close"></i>
                </lx-button>
            </div>
        </div>
    </lx-dialog-header>

    <lx-dialog-content>
                <div id="listAddElements" class="p++">
                    <lx-text-field lx-label="add new image">
                        <input id="imageNew" name="imageNew" type="text" ng-model="imageNew">
                    </lx-text-field>
                    <lx-text-field lx-label="add new dessert">
                        <input id="dessertNew" name="dessertNew" type="text" ng-model="dessertNew">
                    </lx-text-field>
                    <lx-text-field lx-label="add new calories">
                        <input id="caloriesNew" name="caloriesNew" type="text" ng-model="caloriesNew">
                    </lx-text-field>
                    <lx-text-field lx-label="add new fat">
                        <input id="fatNew" name="fatNew" type="text" ng-model="fatNew">
                    </lx-text-field>
                    <lx-text-field lx-label="add new comments">
                        <input id="commentsNew" name="commentsNew" type="text" ng-model="commentsNew">
                    </lx-text-field>
                </div>                                    
                <div class="p++">
                    <lx-button id="button-add" class="bgc-indigo-500" lx-size="xs" lx-type="raised" ng-click="addDialogField()">Добавить</lx-button>
                </div>
    </lx-dialog-content>

    <lx-dialog-footer>
    </lx-dialog-footer>

</lx-dialog>

Массив js-объектов с атрибутами для формирования элементов input:

$scope.dataTableTbody = [
        {
            id: 11,
            image: '/images/placeholder/1-square.jpg',
            dessert: 'Frozen yogurt',
            calories: 159,
            fat: 6.0,
            comments: 'Lorem ipsum'
        },
        {
            id: 13,
            image: '/images/placeholder/3-square.jpg',
            dessert: 'Eclair',
            calories: 262,
            fat: 16.0,
            comments: 'Lorem ipsum'
        }];

[okuznetsov1]

Пробовал вот таким вот образом, но не заработало:

document.querySelector("div[id$='dialog-add']").innerHTML = '<lx-dialog-header><div class="toolbar bgc-primary pl++"><span class="toolbar__label tc-white fs-title">Добавление</span><div class="toolbar__right"><lx-button lx-size="l" lx-color="white" lx-type="icon" lx-dialog-close><i class="mdi mdi-close"></i></lx-button></div></div></lx-dialog-header><lx-dialog-content><div id="listAddElements" class="p++"><lx-text-field lx-label="add new image"><input id="imageNew" name="imageNew" type="text" ng-model="imageNew"></lx-text-field><lx-text-field lx-label="add new dessert"><input id="dessertNew" name="dessertNew" type="text" ng-model="dessertNew"></lx-text-field><lx-text-field lx-label="add new calories"><input id="caloriesNew" name="caloriesNew" type="text" ng-model="caloriesNew"></lx-text-field><lx-text-field lx-label="add new fat"><input id="fatNew" name="fatNew" type="text" ng-model="fatNew"></lx-text-field><lx-text-field lx-label="add new comments"><input id="commentsNew" name="commentsNew" type="text" ng-model="commentsNew"></lx-text-field></div><div class="p++"><lx-button id="button-add" class="bgc-indigo-500" lx-size="xs" lx-type="raised" ng-click="addDialogField()">Добавить</lx-button></div></lx-dialog-content><lx-dialog-footer></lx-dialog-footer>';

т.е. подменяю содержимое всего div компонента "dialog" (LUMX) - новым содержимым. Но такой вариант не заработал, диалоговое окно открывается, поля отображаются/появились, но перестали работать кнопки и эффекты анимации.



Сейчас пробую реализовать на document.createElement, но мне кажется должно быть другое решение в angular

[okuznetsov1]

Как и предполагал в angular имеется вариант решения моей задачи через ng-include и templates - http://stackoverflow.com/questions/2...orm-generation (см. вариант ответа отмеченный правильным)

[destus]

это что за старая версия ангуляра у вас используется в проекте? Это решается созданием компонента, который будет рисовать форму и прокидыванием сверху через биндинги куска состояния (элемент массива dataTableTbody в данном случае).

innerHTML =

и не заработает, потому что это просто вставка узла в DOM, который никак не компилируется ангуляром.

[okuznetsov1]

это что за старая версия ангуляра у вас используется в проекте? Это решается созданием компонента, который будет рисовать форму и прокидыванием сверху через биндинги куска состояния (элемент массива dataTableTbody в данном случае).

и не заработает, потому что это просто вставка узла в DOM, который никак не компилируется ангуляром.

спасибо, понял вас. в следующий раз буду делать через компонент.