Question

使用ngRoute使用AngularJS的单页应用程序，我们可以使用以下方式跳转到不同的页面：

<a href="#/secondPage" class="btn btn-primary">Get Data</a>

但是，上面有一个文本输入框（<input type="text" ng-model="someTextInput">，它不会以这种方式响应Enter键（它们不在<form>元素内。所以用户必须在文本框中输入内容，然后单击下面的链接，由于Bootstrap的CSS样式，它看起来像一个按钮。

问题是：

我们如何按Enter键工作？（可能会添加一些属于AngularJS的东西）

如果我只是将HTML更改为带有提交按钮的表单，该怎么办：

<form class="form-group" method="get" action="#/secondPage">
    <input type="text" class="form-control" ng-model="someTextInput">
    <button type="submit" class="btn btn-primary">Get Data</button>
</form>

这是AngularJS的做法吗？它实际上与使用<a href="#/ ">完全相同，只是让Enter响应用户吗？

（感觉速度慢或者我不知道这是否只是我的想象力（可能是按Enter键我希望它立即响应，而不是实际去鼠标点击，然后它已经是1秒那么我不喜欢记住之后0.5秒进入第二页）

Answer 1

如果我的问题正确无误：

用户在输入中输入内容
按Enter键
应该导航到第二页

然后下面的代码应该有效：

<input type="text" class="form-control" ng-model="someTextInput" ng-keyup="handleKeyUp($event)">

然后在你的控制器（js文件）中，如果你使用$ scope语法：

module.controller('yourController', function ($scope, ..., $location))

  ...

 $scope.handleKeyUp = function ($event) {
      if ($event.keyCode === 13) {
           $location.path('/secondPage');
       }
 }

如何使用表单而不是AngularJS单页面应用程序的链接转到不同的页面？

1 个答案: