Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2017, 11:35
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Как динамически обновлять содержимое в компоненте "dialog" в Lumx
Сейчас у меня во 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, 28.02.2017 в 12:05. Причина: изменил заголовок
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2017, 12:05
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

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

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, 28.02.2017 в 17:35.
Ответить с цитированием
  #3 (permalink)  
Старый 01.03.2017, 11:27
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Как и предполагал в angular имеется вариант решения моей задачи через ng-include и templates - http://stackoverflow.com/questions/2...orm-generation (см. вариант ответа отмеченный правильным)
Ответить с цитированием
  #4 (permalink)  
Старый 01.03.2017, 11:48
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207


это что за старая версия ангуляра у вас используется в проекте? Это решается созданием компонента, который будет рисовать форму и прокидыванием сверху через биндинги куска состояния (элемент массива dataTableTbody в данном случае).
Цитата:
Пробовал вот таким вот образом, но не заработало:
innerHTML =
и не заработает, потому что это просто вставка узла в DOM, который никак не компилируется ангуляром.
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2017, 15:32
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Сообщение от destus Посмотреть сообщение

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заполнить поля VK? veg Events/DOM/Window 1 17.11.2016 10:08
Как добавлять класс к li если в div сlass = 1-5 zulyamodx Общие вопросы Javascript 5 02.11.2016 16:35
как получить координаты яндекс.карт из текстового поля Nesquik Общие вопросы Javascript 0 05.06.2016 17:18
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Как сделать динамически загружаемый список? mikeles AJAX и COMET 9 13.11.2009 15:13