我有一个要求，我有一个表（8 * 6）48个单元格，所有都有<td>内的输入标记，在提交该表时我的js文件必须获取所有数据并将其发布到我的后端控制器。我的问题是因为所有单元格都是输入文本类型，angular无法获取其中的值。
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="jquery@2.0.3" 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>
当我尝试使用innerHTML属性进行查询时，我得到了完整的HTML标记，如
<input type="text" id="row-32-position" name="row-32-position" value="Developer">
我需要查询值..需要你的帮助
答案 0 :(得分：1)
而不是：
obj.push(tdColl[y].innerHTML);
尝试：
var td = tdColl.eq(y);
var input = td.find('input,select');
if (input.length) {
obj.push(input.val());
} else {
obj.push(td.text());
}
答案 1 :(得分：1)
我从你的描述中了解到的。
HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></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" ng-model="table.rowone.age">
</td>
<td>
<input type="text" ng-model="table.rowone.position">
</td>
<td>
<select ng-model="table.rowone.office">
<option value="Edinburgh">
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>
<tr>
<td>yoyo baby</td>
<td>
<input type="text" ng-model="table.rowtwo.age">
</td>
<td>
<input type="text" ng-model="table.rowtwo.position">
</td>
<td>
<select ng-model="table.rowtwo.office">
<option value="Edinburgh">
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>
<button ng-click="submitTable(table)">Submit</button>
</form>
<pre>{{tableval | json}}</pre>
</body>
</html>
Angular Code：
var app = angular.module('plunker', []);
app.controller('isrcorders', function($scope) {
$scope.submitTable = function(tablevalues) {
// $http.post('/url', tablevalues)
// .success(function(data, status) {
// })
// .error(function(data, status) {
// });
$scope.tableval = tablevalues;
console.log(tablevalues);
}
});