如何在angularjs webapi中使用ng-change在表格中聚焦文本框?

Question

当我更改数量时，数量焦点丢失了。 点击这里查看图片

AngularJS 代码：ng-change code

$scope.txtqty = function (item) {
var id = item.Id;
$http.put("/api/Products/txtqty/" + id, item).then(function (response) {
$scope.gridproducts = response.data;
})
}

表格代码

<table>
<tbody>
<tr ng-repeat="item in gridproducts">
<td ng-click="griddelete(item.Id)"><a class="delete"><i class="fa fa-times-circle-o"></i></a></td>
<td class="name">{{item.ProductName}}</td>
<td>{{item.ProductRate}}</td>
<td><input class="form-control qty" type="text" style="width:50px" ng-change="txtqty(item)" ng-model="item.ProductQty" value="{{item.ProductQty}}"></td>
<td>{{item.TotalAmount}}</td>
</tr>
<tr></tr>
<tfoot>
<tr>
<th colspan="2"></th>
<th colspan="2"><b>Total</b></th>
<th><b>{{gridproducts[0].TotalBill}}</b></th>
</tr><tr>
<th colspan="2"><b></b></th>
<th colspan="2"><b>Total Items</b></th>
<th><b>25</b></th>
</tr>
</tfoot>
</table>

Webapi 控制器代码这是 webapi 控制器在这里你可以看到

[System.Web.Http.Route("api/Products/txtqty/{id}")]
[ResponseType(typeof(void))]
public IHttpActionResult PuttxtQTY(int id, Product Pro)
{
var q = gridlist.Where(x => x.Id == id).FirstOrDefault();
if (q != null)
{
q.ProductQty = Pro.ProductQty;
q.TotalAmount = q.ProductQty * q.ProductRate;
q.TotalBill = gridlist.Sum(x => x.TotalAmount);
foreach (var item in gridlist)
{
item.TotalBill = q.TotalBill;
}
}
return Ok(gridlist);
}

Answer 1

您可以为每个输入提供一个唯一的 ID，并手动重新聚焦它：

输入时带有 ID 的 HTML

<td><input class="form-control qty" type="text" id="productQty_{{item.id}}" style="width:50px" ng-change="txtqty(item)" ng-model="item.ProductQty" value="{{item.ProductQty}}"></td>

使用重新对焦逻辑调整功能

$scope.txtqty = function (item) {
var id = item.Id;
$http.put("/api/Products/txtqty/" + id, item).then(function (response) {
$scope.gridproducts = response.data;
document.getElementById("productQty_" + id).focus();
})
}

希望这可以完成工作:)