Поэтому я пытаюсь добавить дополнительные столбцы в таблицу внутри формы. Добавление самих столбцов не так уж сложно, но я не знаю, как настроить настройку своих 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, а затем искать идентификатор при добавлении столбца.
Таким образом, мой вопрос будет: это правильный способ сделать это и как я получу этот идентификатор? Или я переусердствую, и есть ли более простой способ сделать это?
Вам не следует делать манипуляции с DOM с контроллера. Это не очень хорошая практика при работе с AngularJS. Хорошее правило помнить, что это: не использовать jQuery. Это обычная ошибка при работе с AngularJS. И, если вы полностью уверены, что вам нужно изменить DOM, всегда делайте это из директивы.
О вашей проблеме, может быть, вы можете создать свое решение для создания структуры данных в своем контроллере (Javascript Object) и выполнить ее через ng-repeat
в вашем шаблоне. Таким образом, если вы измените объект (добавив новый столбец), шаблон будет автоматически обновляться.
Используйте стандартную нотацию объектов javascript []
для имен свойств переменных.
<input ng-model="input[startyear].Inventory"