在Angularjs中添加新行后如何以编程方式关注下一个单元格

Question

我是来自 Knockout 世界的 Angular 新手。为了在表格的最后一个单元格中添加一个新的选项卡，我已经连接到一个按键事件。

我的问题是焦点随后进入 uri 栏中的信息图标，而不是新创建的行中的下一个单元格。我确定修复很简单，我只是找不到解决方案，有人可以帮忙吗？

我正在使用 Angularjs v1.59

var myApp = angular.module('myApp', []);
    myApp
    .factory('shippingItems', function () {
        return {
            data: [{
                quantity: 1,
                width: 1,
                height: 1,
                length: 1,
                weight: 1,
                details: 1
            },
            {
                quantity: 2,
                width: 2,
                height: 2,
                length: 2,
                weight: 2,
                details: 2
            },
            {
                quantity: 3,
                width: 3,
                height: 3,
                length: 3,
                weight: 3,
                details: 3
            }]
        };
    })
    .controller("userCtrl", ['$scope', 'shippingItems', function ($scope, shippingItems) {
            $scope.shippingItems = shippingItems.data;
    }])
    .directive("myTab", ['shippingItems', function (shippingItems) {
        return {
            link: function (scope, element, attrs) {
                scope.index = attrs.indexTracker;
                element.bind("keydown keypress", function (event) {
                    if (scope.index == (shippingItems.data.length-1)) {
                        if (event.which === 9) {
                            var newItem = {
                                quantity: null,
                                width: null,
                                height: null,
                                length: null,
                                weight: null,
                                details: null
                            };
                            shippingItems.data.push(newItem);
                            element.next().focus();
                        }
                    }
                });
            }
        }
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp">
    <div ng-controller="userCtrl">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">lol</h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Quantity</th>
                            <th>Width x Height x Length (cm)</th>
                            <th>Weight Per Item</th>
                            <th>Total Weight</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-input" ng-repeat="item in shippingItems">
                            <td><input type="text" ng-model="item.quantity" /></td>
                            <td><input type="text" ng-model="item.width" /> x <input type="text" ng-model="item.height" /> x <input type="text" ng-model="item.length" /></td>
                            <td><input type="text" ng-model="item.weight" />kg</td>
                            <td>{{ (item.weight|number) * (item.quantity|number)}}kg</td>
                            <td my-tab="checking" index-tracker="{{$index}}"><input type="text" ng-model="item.details" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

你不需要directive 实际上你想要的是service 但是在这个示例中你可以看到如何使用angular.element 并从你最后一个input 在li 或@ 中传递$event 987654327@.

var app = angular.module("app", []);

app.controller("ctrl", function($scope, $timeout) {
  $scope.ul = [{}, {}, {}]

  $scope.callService = function(event, index) {
    if (event.keyCode === 13) {
      var nextInext = index + 1;

      if (angular.isUndefined($scope.ul[nextInext])) {
        $scope.ul.push({});
      }

      $timeout(function() {
        angular.element(event.target).closest(".parent").find(".child-" + nextInext + " input").select();
      })
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <h5>auto focus on next input, auto push [press Enter on inputs]</h5>
  
  <ol class="parent">
    <li ng-repeat="li in ul" class="child-{{$index}}">
      <input type="text" ng-keydown="callService($event, $index)" ng-model="li.input" />
    </li>
  </ol>

</div>

Answer 2

  var myApp = angular.module('myApp', []);
    myApp
    .factory('shippingItems', function () {
        return {
            data: [{
                quantity: 1,
                width: 1,
                height: 1,
                length: 1,
                weight: 1,
                details: 1
            },
            {
                quantity: 2,
                width: 2,
                height: 2,
                length: 2,
                weight: 2,
                details: 2
            },
            {
                quantity: 3,
                width: 3,
                height: 3,
                length: 3,
                weight: 3,
                details: 3
            }]
        };
    })
    .controller("userCtrl", ['$scope', 'shippingItems', function ($scope, shippingItems) {
            $scope.shippingItems = shippingItems.data;
    }])
    .directive("myTab", ['shippingItems', function (shippingItems,$timeout) {
        console.log('CALLED')
        return {
            link: function (scope, element, attrs) {
                element.bind("keydown", function (event) {
                event.preventDefault();
                scope.index = attrs.indexTracker;
                    if (scope.index == (shippingItems.data.length-1)) {
                        //if (event.keyCode === 81 && event.altKey) {
                        if (event.keyCode === 9) {
                            var newItem = {
                                quantity: null,
                                width: null,
                                height: null,
                                length: null,
                                weight: null,
                                details: null
                            };
                            shippingItems.data.push(newItem);
                            setTimeout(function(){
                                var tr_dom      = element[0].closest('tr').nextElementSibling
                                var input       = element[0].closest('tr').nextElementSibling.querySelector('input')
                                input.focus()
                             },10);
                            scope.$apply()
                        }
                    }
                });
            }
        }
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="userCtrl">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">lol</h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Quantity</th>
                            <th>Width x Height x Length (cm)</th>
                            <th>Weight Per Item</th>
                            <th>Total Weight</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-input" ng-repeat="item in shippingItems">
                            <td><input type="text" ng-model="item.quantity"/></td>
                            <td><input type="text" ng-model="item.width" /> x <input type="text" ng-model="item.height" /> x <input type="text" ng-model="item.length" /></td>
                            <td><input type="text" ng-model="item.weight" />kg</td>
                            <td>{{ (item.weight|number) * (item.quantity|number)}}kg</td>
                            <td ><input type="text" index-tracker="{{$index}}" ng-model="item.details" my-tab="checking"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>