相关疑难解决方法(0)

AngularJS表中的键盘导航

我正在尝试将Windows(Delphi VCL)中的特殊表/网格表格移植到Angular应用程序.

可以在此处测试角度应用程序的简化版本:jsFiddle演示.

用户可以根据需要添加任意数量的行,如jsFiddle中所示.

问题是:是否可以使用Angular指令或其他一些Angular魔法解决以下问题?

  1. 按下回车键时跳转到下一个单元格(右侧单元格或新行)
  2. 直接跳到箭头下方的单元格.
  3. 在箭头上方直接跳到上方的单元格.

HTML:

<tbody>
<tr ng-repeat="p in persons">
    <td>
        <input ng-model="p.name">
    </td>
    <td>
        <input ng-model="p.age">
    </td>
    <td>
        <button ng-click="add($index)">Add new person</button>
    </td>
</tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)

JS:

function TestingCtrl($scope) {

  $scope.persons = [{
      name: 'Alice',
      age: 20
    }, {
      name: 'Bob',
      age: 30
    }];

  $scope.add = function(index) {
    var newPerson = function() {
      return {
        name: '',
        age: ''
      };
    };
    $scope.persons.splice(index + 1, 0, new newPerson());
  }

}
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

1
推荐指数
1
解决办法
7676
查看次数

标签 统计

angularjs ×1

javascript ×1