Menu
I have a requirement where i have a table with (8*6)48 cells with all have input tag inside <td>, on submitting that table my js file has to take all the data and POST it to my backend controller. My issue is since all the cells are input text type, angular is not able to take the values inside of it.
var isrcorderapp = angular.module('plunker', []);
/*
isrcorderapp.directive("test1", function(){
return {
restrict:'A',
link: function($scope, $elem) {
var arr = ($($elem[0]).find('tbody tr'));
var coll = [];
for(var i=0; i < arr.length; i++){
var tr = arr[i];
var tdColl = $(tr).find('td');
var obj = [];
for(var y = 0; y < tdColl.length; y++ ){
obj.push(tdColl[y].innerHTML);
}
coll.push(obj)
}
console.log(coll);
}
}
});
*/
isrcorderapp.controller("isrcorders", function($scope,$http,$compile) {
$scope.myVal='submit';
$scope.coll={};
$scope.myFn=function(){
var total=angular.element( document.querySelector( '.table' ) ).find('tbody tr');
var coll = [];
console.log('totla'+total);
for(var i=0; i < total.length; i++){
console.log('totla'+total);
var tr = total[i];
var tdColl = $(tr).find('td');
console.log(tdColl);
var obj = [];
for(var y = 0; y < tdColl.length; y++ ){
obj.push(tdColl[y].innerHTML);
}
coll.push(obj);
console.log(coll);
}
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" ></script>
<script src="app.js"></script>
</head>
<body ng-controller="isrcorders">
<form ng-submit="myFn()">
<table test1="" id="isrctable" class="table" >
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
<td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
<td><select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select></td>
</tr>
</tbody>
</table>
<input type="submit" id="submit" value={{myVal}} />
</form>
</body>
</html>when I tried to query with innerHTML property I am getting complete HTML tag like
<input type="text" id="row-32-position" name="row-32-position" value="Developer">
I need to query the value .. need your help on this
451
asked Aug 07 '26 22:08
Instead of:
obj.push(tdColl[y].innerHTML);
try:
var td = tdColl.eq(y);
var input = td.find('input,select');
if (input.length) {
obj.push(input.val());
} else {
obj.push(td.text());
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
