Question

我查看了多个线程并尝试了各种各样的解决方案。坦率地说，我认为我正在失去理智。

我有输入的ng-repeat。所有需要发生的事情是，当用户按下回车键时，它应该将焦点转移到下一个输入，基本上模拟了标签键功能。

代码（不完整）： HTML：

<body ng-app="ap" ng-controller="con"> 
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat='person in persons'>
        <td>
            <input type='text'
                name="personName"
                ng-model="person.name" 
            />
        </td>
        <td>
            <input type='number'
                name="personName"
                ng-model="person.age" 
                enter-as-tab
            />
        </td>
    </tr>
</table>

JS：

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

app.controller("con", function ($scope) {

    $scope.persons = [
        { name: 'Susan', age: 1 }, 
        { name: 'Peter', age: 1 },
        { name: 'Jack', age: 2 }
    ];
});

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                // Go to next age input                        
            }
        });
    };
});

以下是小提琴的链接：fiddle

Answer 1

好的，所以我明白了。毕竟不是那么困难。刚刚陷入了整体“在使用Angular时不要想jQuery”的心态。

这是我实施的指令：

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus = element.next('tr').find('input')[1];
                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});

以下是工作小提琴的链接：enter-as-tab

Answer 2

从@ avn的解决方案开始，我做了一些更改，以递归方式查找并关注下一个输入文本或输入数字，但仅在值有效或发送表单时。专为ionic形式而设计，但可以适应任何角度形式：

app.directive('enterAsTab', function () {
  return {
    restrict: 'A',
    require:  '^ngModel',
    link: function (scope, element, attrs, ctrl) {
      element.bind("keydown keypress", function (event) {

        function isKeyEnterAndValid(){
          return event.which === 13 && ctrl.$valid;
        }

        function nextItem(div, tag){
          var next = div.next(tag);
          if (!next) return nextItem(div, 'label');
          return next;
        }

        function isTypeTextOrNumber(input){
          return ['text', 'number'].indexOf(input.attr('type')) === -1;
        }

        function findInput(div){
          var next = nextItem(div, 'div');
          if (!next) return;
          var input = next.find('input');
          if (!input || isTypeTextOrNumber(input)){
            return findInput(next);
          }
          return input[0];
        }

        if(isKeyEnterAndValid()) {
          var nextInput = findInput(element.parent());
          if(angular.isDefined(nextInput)){
            event.preventDefault();
            nextInput.focus();
          }
        }

      });
    }
  };
});

使用enter键作为选项卡仅使用angularjs和jqlite

2 个答案: