6

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

我有一个带有输入的 ng-repeat。所要做的就是当用户按下回车键时，它应该将焦点转移到下一个输入，基本上模拟 Tab 键的功能。

代码（不完整）： 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                        
            }
        });
    };
});

这是小提琴的链接：小提琴

4

2 回答 2

10

好的，所以我想通了。毕竟没那么难。刚刚陷入了整个“在使用 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

于 2014-10-10T09:34:45.987 回答
0

从@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();
          }
        }

      });
    }
  };
});
于 2016-09-27T00:38:05.533 回答