I need one help.i want to fetch each row data of a table using Angular.js.I am explaining my code below.
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td> <select class="form-control" name="catagory[$index]" id="catagory[$index]" ng-model="catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="removeBorder('catagory',$index,catagory.value);" >
</select></td>
<td>
<select class="form-control" name="subcatagory[$index]" id="subcatagory[$index]" ng-model="subcatagory[$index]" ng-options="sub.name for sub in listOfSubCatagory[$index] track by sub.value " ng-change="setSubCatagory($index,subcatagory[$index].value);" >
<option value="">Select Subcategory</option>
</select>
</td>
<td><input type="text" name="comment[$index]" id="comment" class="form-control oditek-form" placeholder="Add Comment" ng-model="comment[$index]" ng-keyup="comment($index,comment[$index]);"></td>
</tr>
<input type="button" class="btn btn-success" ng-click="saveResturantDetails(billdata);" id="saveData" value="Save" style="margin-right:20px;"/>
When user will click on save button the each row data should fetch to the controller.I am explaining my code below.
$scope.saveResturantDetails=function(billdata){
for(var i=0;i< $scope.days.length;i++){
var data={'cat':$scope.catagory[i].value,'subcat':$scope.subcatagory[i].value,'comment':$scope.comment[i]};
arr.push(data);
}
console.log('arr',arr);
}
Here i am using $index in each model so that i can get data into a loop.But in this way i am getting this following error.
TypeError: Cannot read property 'value' of undefined
Please help me to resolve this issue.
In your controller Declare a scope object called answers.
$scope.days = [{name:"m"},{name:"t"}];
$scope.answers={};
$scope.save = function(){ console.log($scope.answers)};
Then your html iterate days and assign ng-model to answers object.
<div><tr ng-repeat="d in days">
<td>{{d.name}}</td>
<td><input type="text" ng-model="answers['comment'+$index]"/></td>
</tr></div>
<button ng-click="save()">Save</button>
Ng Repeat creates Chid Scope so we won't get that in controller. This will definitely work. I Checked
Sorry for my bad english
Related
I have a table. Every cell of the row tables are form fields. Also, I have two buttons: one button add a new row to the table and a second one whitch send all the rows.
This is for add new blank rows:
$scope.atributs =[];
$scope.addRow = function(){
var newRow = {nomAtribut: "",tipus: "",mida: "",prioritat: "",obligatori: "",observacions: ""};
$scope.atributs.push(newRow);
}
View :
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
<td>Observacions</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td><input type="text" ng-model="atribut.nomAtribut" /> </td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="number" ng-model="atribut.mida" /></td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="checkbox" ng-model="atribut.obligatori" ng-true-value="'YES'" ng-false-value="'NO'"></td>
<td><input type="text" ng-model="atribut.observacions" /> </td>
</tr>
</table>
Angular Code for sending data to web Service :-
$scope.sendRow = function(){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", $scope.atributs).success(function(data){
$scope.status = data;
})
}
Json Array Sending:-
[{"nomAtribut":"j",
"tipus":{"idvalors_combo":"3","valor":"Date"},
"mida":11,"prioritat":"",
"obligatori":"YES",
"observacions":"fcefwq"}]
Is all correct and the problem come from the web service? or the angular code is wrong? It's my first try with angular. Thank you.
So it looks like your web service wants a single element from your data array at a time.
I think you should modify the sendRow function to take the row index you want to send, like so:
$scope.sendRow = function(atributRow){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", atributRow).success(function(data){
$scope.status = data;
})
}
Then, you can send all rows in a loop by:
angular.forEach($scope.atributs, $scope.sendRow);
or a single row with a specific index:
$scope.sendRow($scope.atributs[0])
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.
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());
So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!
u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.
This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});
What I require is a pretty standard feature. And I am sure its easy enough, but somehow I cant make it happen. Please help me out here.
This is the scenario-->
I have a struts form on a jsp, which takes in employee information. Now with every employee I want to associate some family members.
So for information of family members I want :
1.) A row of -- 1 select element and 3 text field elements -- in the end of the form.
2.) A 'add' button which appends such rows on demand for adding more family members.
I dont know how I can attach a screen shot to give you exact idea of what I want.
I have tried doing this, using javascript, but javascript adds standard HTML elements, because of which I am not able to access the value of those fields in my action class.(Please tell me if this is not the case, because then the only question that will remain is, why am I unable access those values)
Currently what I am trying:
JSP:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td>Relationship</td>
<td>Name</td>
<td>Age</td>
<td>Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName[]"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++){
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
root.appendChild(cRow);
}
With this I am able to add a new row of specified elements, but unable to access the field values in the action class. I would like to point out that I am not able to access even the first row's elements in action class (probably because they are standard HTML).
Any help is appreciated.
Thanks!!
here is the solution to the problem, for those still stuck on it.
In the jsp:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td align="center">Relationship</td>
<td align="center">Name</td>
<td align="center">Age</td>
<td align="center">Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
</tr>
<tr>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
root.appendChild(cRow);
}
Then in the action class, just define a variables like this:
private String rel[];
private String rName[];
private String rAge[];
private String rOccupation[];
Define their getters and setters, and you can access each element of each row in jsp like this :
rel[0], rel[1], ........
rName[0],rName[1], .......
etc......
As for copying the Value of select element to cloned row, its simple javascript. Just do this:
clonedSelect.selectedIndex = original.selectedIndex;
If you still have issues, comment. :)