Добавить новые столбцы с определенной моделью ng в таблицу HTML

0

Поэтому я пытаюсь добавить дополнительные столбцы в таблицу внутри формы. Добавление самих столбцов не так уж сложно, но я не знаю, как настроить настройку своих ng-моделей.

Это мой текущий код: (HTML)

<button ng-click="add()" type="button">+ column</button>
        <table>
            <thead id="inputtablehead">
                <th class="theadlabel">(in 1.000 EUR)</th>
                <th>{{startyear}}</th>
                <th class="NBBCodesHeader">NBB Codes</th>
                <th>Source</th>
            </thead>
            <tbody class="input">
                <tr>
                    <td>number of months</td>
                    <td>
                        <input ng-model="input{{startyear}}.NumberMonths" type="text" class="{{startyear}}" required>
                    </td>
                        <td class="NBBCodes"></td>
                </tr>
                <tr>
                    <td>Fixed assets</td>
                    <td>
                        <input ng-model="input{{startyear}}.FixedAssets" class="{{startyear}}" type="text" required>
                    </td>
                    <td class="NBBCodes">20/28</td>
                </tr>
                <tr>
                    <td>Inventory</td>
                    <td>
                        <input ng-model="input{{startyear}}.Inventory" class="{{startyear}}" type="text" required>
                    </td>
                    <td class="NBBCodes">3</td>
                </tr>
</table>

(ДС)

angular.module("inputFields", []).controller("MyTable", function ($scope) { 
    $scope.startyear = new Date().getFullYear();
    var nextyear = new Date().getFullYear() - 1;
    $scope.add = function () {
        $(".NBBCodesHeader").before("<th>"+nextyear+"</th>");
        $(".input .NBBCodes").before('<td><input class='+nextyear+' type="text" required></td>');
        nextyear--;
    };
    });

Таким образом, в моем JS <input class='+nextyear+' type="text" required> должен стать чем-то вроде <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> для элемента <td> добавленного рядом с рядом "число месяцев".

Я думал, чтобы дать ea строке id в виде NumberMonths, а затем искать идентификатор при добавлении столбца.

Таким образом, мой вопрос будет: это правильный способ сделать это и как я получу этот идентификатор? Или я переусердствую, и есть ли более простой способ сделать это?

2 ответа

0

Вам не следует делать манипуляции с DOM с контроллера. Это не очень хорошая практика при работе с AngularJS. Хорошее правило помнить, что это: не использовать jQuery. Это обычная ошибка при работе с AngularJS. И, если вы полностью уверены, что вам нужно изменить DOM, всегда делайте это из директивы.

О вашей проблеме, может быть, вы можете создать свое решение для создания структуры данных в своем контроллере (Javascript Object) и выполнить ее через ng-repeat в вашем шаблоне. Таким образом, если вы измените объект (добавив новый столбец), шаблон будет автоматически обновляться.

0

Используйте стандартную нотацию объектов javascript [] для имен свойств переменных.

<input ng-model="input[startyear].Inventory"

Ещё вопросы

Сообщество Overcoder
Наверх
Меню