如何使用angularjs webapi中的ng-change将文本框聚焦在表格中？答案

【问题标题】：How to focus the textbox Within the table using ng-change in angularjs webapi?如何使用angularjs webapi中的ng-change将文本框聚焦在表格中？
【发布时间】：2018-05-31 18:13:42
【问题描述】：

当我改变数量时，失去了数量焦点.. click here to see image

AngularJS 代码：ng-change 代码

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

HTML表格代码

    <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 Controller code 这是webapi controller here你可以看到

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

【问题讨论】：

首先不是ng-onchange，而是ng-change，就像documentation一样。其次，你是什么意思当我改变数量时，失去了数量焦点 ...什么焦点？输入字段焦点？
好的，谢谢您的回复...意思是当我更改数量时，更新后（数量*价格）比文本框不聚焦...我想在更新后关注文本框
请看截图
对不起，我在代码和屏幕截图中都没有看到任何文本框......你指的是输入吗？你能附上代码吗？
这是表格中的文本框

标签： angularjs asp.net-mvc asp.net-web-api angularjs-directive

【解决方案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();
    })
}

希望这能起到作用:)

【讨论】：