gpt4 book ai didi

javascript - 带有数据的 Angular 提交表

转载 作者:可可西里 更新时间:2023-11-01 13:28:29 24 4
gpt4 key购买 nike

我有一个要求,我有一个包含 (8*6)48 个单元格的表格,所有单元格都在 <td> 内有输入标签。 ,在提交该表时,我的 js 文件必须获取所有数据并将其发布到我的后端 Controller 。我的问题是因为所有单元格都是输入文本类型,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">

我需要查询值..需要你的帮助

最佳答案

代替:

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());
}

关于javascript - 带有数据的 Angular 提交表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33997341/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com