[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'
        }];