Friday, December 11, 2015

How to define the tab order in AngularJS ng-repeat Table?

in my application. there is a table to host multiple textbox in each row.

since the user want to use the tab key to put the cursor focus on the next textbox, after they complete a textbox.

we can use the tabIndex properties in the textbox, set tabIndex value by using $index in the ng-repeat.

 <tr ng-repeat="orderDetail in MyOrder.orderDetailsList track by $index">
                           
                            <td><input type="text" tabindex="6+{{$index}}" ng-model="orderDetail.quantities" ng-blur="getQuantityTotal()"></td>
                            <td><input type="text" tabindex="6+{{$index}}+1"  class="shipItemInput" ng-model="orderDetail.shipItemName" ng-keyup="shipItemAutoComp('shipItemInput',$index)"><input type="text" ng-model="orderDetail.shipItemID" ng-show="false"   /></td>
                       
                            <td><input type="text"  tabindex="6+{{$index}}+3"  ng-model="orderDetail.weight" ng-blur="getWeightTotal()"></td>
                        </tr>

No comments:

Post a Comment