首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在angularjs webapi中使用ng-change来聚焦表格中的文本框?

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

Stack Overflow用户
提问于 2018-05-31 00:01:53
回答 1查看 75关注 0票数 0

当我改变数量时,数量焦点就丢失了。click here to see image

AngularJS代码:ng-更改代码

代码语言:javascript
复制
$scope.txtqty = function (item) {
    var id = item.Id;
    $http.put("/api/Products/txtqty/" + id, item).then(function (response) {
        $scope.gridproducts = response.data;
    })
}

HTML表格代码

代码语言:javascript
复制
    <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控制器,你可以在这里看到

代码语言:javascript
复制
 [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);
        }
EN

回答 1

Stack Overflow用户

发布于 2018-05-31 18:13:42

您可以为每个输入提供一个唯一的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>

使用重新聚焦逻辑调整函数

代码语言:javascript
复制
$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();
    })
}

希望这能解决这个问题:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50609093

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档