我正在使用 ng-repeat 创建一个表。该表有一个输入,人们可以在其中写入任何内容。当我想获取所选输入的每个值时,我的问题就出现了,因为只获取第一行:
<table class="table">
<thead>
<tr>
<th style="text-align:center">Name</th>
<th style="text-align:center">LastName</th>
<th style="text-align:center;width:200px">Write a funny commentary</th>
<th style="text-align:center">Save</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myItems">
<th style="font-weight:normal;text-align:center">{{item.name}}</th>
<th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
<th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
<input type="text" class="form-control" id="theBox">
</th>
<th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
<button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
</th>
</tr>
</tbody>
</table>
</tbody>
</table>
我知道所有返回值的输入都获得相同的 id。有没有办法获取任何创建的行的特定数据?即使我尝试过 querySelectorAll()
但不起作用:
$scope.textOfValue = function(t){
$scope.theValue = t;
//to get the specific data of row
var xandria = document.querySelectorAll("#boxOf"), k, length;
for(k = 0, length = xandria.length; k < length; k++){
xandria[k].classList.add('form-control.x');
}
$scope.getText = document.getElementById('theBox').value;
console.log($scope.getText);
}
有人建议解决方案在这里 prototypical inheritance in AngularJS? ,但到目前为止我还完全不明白......你能帮我举个例子吗?
我正在使用 AngularJs 和 Javascript。
提前致谢。
最佳答案
您遇到此问题是因为 ng-repeat 一次又一次地创建具有相同 id 的输入。
您应该使用 trackBy
获取索引并将该索引应用于 InputField Id,同时使用循环索引绑定(bind)您的 ng-Model
。
例如:
<tr ng-repeat="item in myItems track by $index">
<th style="font-weight:normal;text-align:center">{{item.name}}</th>
<th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
<th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
<input type="text" class="form-control" id="theBox-{{$index}}" ng-model="newInputValue[$index].value>
</th>
<th style=" font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
<button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
</th>
</tr>
现在,您已经有了 newInputValue
数组,您可以使用索引访问它。它将创建新对象。另外,如果您尝试通过 ID 访问输入字段,则可以使用 $index
来获取单个输入字段。
关于javascript - 更改 ng-repeat 内部的类以获取输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53380787/