Develop Reference

Add new columns with specific ng-model to HTML table

So I am trying to add additional columns to a table inside a form. Adding the columns themselves is not that difficult but I don't know how to go about setting their ng-models.
This is my current code:
(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>
(JS)
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--;
};
});
So in my JS the <input class='+nextyear+' type="text" required> should become something like <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> for the <td> element added next to the 'number of months' row.
I was thinking to give ea row an id in the form of NumberMonths and then look up the id when adding the column.
So my question would be: is this a valid way to do it and how would I get this id? Or am I overthinking it and is there an easier way to do this?

Use standard javascript [] object notation for variable property names.
<input ng-model="input[startyear].Inventory"

You shouldn't do DOM manipulations from a controller. It's not a good practice when working with AngularJS. A good rule to remember that is: don't use jQuery. It's a common mistake when starting working with AngularJS. And, in case you would be completely sure that you need to modify the DOM, do it always from a directive.
About your problem, maybe you can base your solution in create a data structure in your controller (a Javascript Object), and render it through a ng-repeat in your template. This way, if you modify the object (adding a new column), the template will be automatically updated.

send multiple variables with jQuery

This is my first code with jQuery, so be indulgent please. The code below is part of a table in which each row displays: a reload button (Reload.gif), and two comboboxes (cmb1 and cmb2). Here is the edited code for just one row:
<table>
<form name="myformname" form action="Handler.php" method="post">
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" src="Reload.gif" border="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</form>
</table>
Variables MyQuestion, cmb1 and cmb2 (user-selected) are passed to Handler.php (as all are in the same form), that search data in databases and reload the page with the new data. This is working OK.
But now I want to change the logic, cause I dont want to reload the whole page, but only the row that was clicked. I tried with jQuery something like this (OnClick added to Reload.gif!):
<table>
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" onclick="recp('0')" src="Reload.gif" border="0" name="MyQuestion" value="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</table>
And in the header I added this code (I took it from here)
function recp(id) {
$('#myStyle').load('data.php?id=' + id);
}
I got some results for the id, but here is my question:
In the
load('data.php?id=' + id)
, can I send multiple variables (id, cmb1 and cmb2)?

To send multiple variables you could use for example,
load('data.php?id=' + id + '&var1=' + var1 + '&var2=' + var2)
For more examples and other ways to do it, have a look in the jQuery manual for the load() function.

Why not use .serialize()?
$("#myStyle").load('data.php?' + $("form[name=myformname]").serialize());

Creating a new form on click of link

How could I make it so the code below retains what it does now but does the following:
a) When the add menu link/button is clicked it shows the bookingName menu div and the same item and qty boxes
b) When the above happens it also needs the abilty to add more rows to that particular just added menu
Demo of current work
jQuery:
$(document).ready(function () {
$('<tr/>', {
'class': 'menuDetails',
html: getMenuHTMLDetails()
}).appendTo('#addMoreItemsButton');
$('#addItem').click(function () {
$('<tr/>', {
html: getMenuHTMLDetails()
}).hide().appendTo('.menuDetailsBlock').slideDown('slow');
});
})
function getMenuHTMLDetails() {
var $clone = $('.menuDetails').clone();
$clone.find('[name="item[]"]')[0].name = "item";
$clone.find('[name="qty[]"]')[0].name = "qty";
return $clone.html();
}
HTML:
<div class="formBlock">
<p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
</div>
<div class="formBlock">
<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>
<div class="appendMoreItems"></div>
</div>
<div class="formBlock">
Add Item Add Menu
</div>
</div>

The first thing you should be aware of is that your html is invalid. You can't have something like:
<td><span>...</td><td>...</span></td>
Because this form needs the ability to be duplicated, you need to remove all IDs (and ideally change to them classes). e.g. id="addMenu" -> class="addMenu".
Instead of using your standard click handler, you should use delegates to handle any clicks within your outer container - read http://api.jquery.com/on/.
As for your duplication problem, place a template of your elements to be duplicated inside a script tag with an id you can reference and clone (with .html()), or, even better, consider looking into http://handlebarsjs.com/ or http://akdubya.github.io/dustjs/.

how to change value of one input text field (in one html table) based on a specific value of another input text field (present in another html table)

I have one html table which has one row. This row has two TDs which hold their own tables within them (Each having 10 rows with 10 input fields). I want to change value of another respective text field based on value change in first field onblur().
First field-. It takes value from an Array of size 10
<tr>
<td valign="top">
<table width="85%" border="0" cellpadding="2" cellspacing="1" class="inputTable">
<tr>
<td width="60%">
<table width="60%" border="0" cellpadding="0" cellspacing="1">
<c:set var="input1" value="${someForm.value1}"></c:set>
<c:forTokens items="0,1,2,3,4,5,6,7,8,9" delims="," var="count">
<tr>
<td><input id="field1" name="field1" type="text" value="<c:out value="${input1[count]}" />" onblur="setText2(this)" maxlength="20" size="15">
</td>
</tr>
</c:forTokens>
</table>
</td>
</tr>
</table>
</td>
Second field. This requires value chnage on run when respective value changes for above 10 fields
<td valign="top">
<table width="85%" border="0" cellpadding="2" cellspacing="1" class="inputTable">
<tr>
<td width="60%">
<table width="60%" border="0" cellpadding="0" cellspacing="1">
<c:forTokens items="0,1,2,3,4,5,6,7,8,9" delims="," var="count">
<tr>
<td><input id="field2" name="field2" type="text" value="" />" readonly class="readonly" maxlength="1" size="1">
</td>
</tr>
</c:forTokens>
</table>
</td>
</tr>
</table>
</td>
</tr>
Javascript:
<script>
function setText2(element) {
if(element.value)
{
document.getElementById("field2").value = element.value;
}else{
document.getElementById("indicator").value = "";
}
}
</script>
This is running fine. But problem is I am able to identified which field is being changed through this but unable to get reference of target field. This changes value of second fields but always in first row of second table.
Please help me to run this so that if a field changes of table1 , then the repective (same serial) field of table 2 should change. I cant change the table structure due to some project limitations.

getElementById() is selecting the first element with id="field2". You shouldn't give the same id to multiple elements. Try changing the id to correspond to the count, then in your javascript function you can get the field2 input that corresponds to the count of the blurred input.
Replace your field1 code with this:
<input id="field1_${count}" name="field1" type="text" value="${input1[count]}"
onblur="setText2(this)" maxlength="20" size="15"/>
Replace your field2 code with this:
<input id="field2_${count}" name="field2" type="text" value=""
readonly="readonly" class="readonly" maxlength="1" size="1">
Then change your javascript function:
function setText2(element) {
if(element.value)
{
var changedId = element.id;
var elementNumber = changedId.substring(changedId.indexOf('_') + 1);
document.getElementById("field2_" + elementNumber).value = element.value;
}else{
document.getElementById("indicator").value = "";
}
}

As answered by Tap, assign distinct id for each field (of array). The only thing I want to add is, we should use c:out while assigning number to id as given below (otherwise id will not have numbers as being expected rather it will assign string as "field1_${count}" ):
Use:
<input id="<c:out value="field1_${count}" />" name="field1" type="text" value="<c:out value="${input1[count]}" />" onblur="setText2(this)" maxlength="20" size="15"/>
This runs well!! ;)
I am happy; this solved my big problem without affecting structure of the code...
Thanks a lot again Tap, for your suggestion. :)

Accessing Element From ngRepeat

How can I access a given record inside an ngRepeat loop from the controller, ultimately for form validate?
I have the following form which can have records dynamically added/removed by the user:
<table class="table table-condensed span12" id="tableParticipants">
<!-- snip -->
<tbody>
<tr ng-repeat="person in people">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i></td>
</tr>
</tbody>
</table>
On submitting the form I need to make sure that the employee IDs are valid, else I will get a database error. So, when I work through the loop:
$scope.people.forEach(function(element, index, array)
{
if ($element['empid'] == BAD)
{
// set corredponding ngRepeat row to error
}
}
How can I access that given row for the particular record?

You should be able to do something like the following. Add a css class name to the array item and/or an error message. The rest should be handled by Angular which will update. You have options of show/hiding a message, adding a class, etc.
<tr ng-repeat="person in people" ng-class="person.error">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i> <span>{{person.errorMessage}}</td>
</tr>
if ($element['empid'] == BAD)
{
$element['errorMessage'] = 'Invalid Id'; // could bind or show a span/depends.
$element['error'] = 'error'; // set to whatever class you want to use.
}