Question

我正在使用表格中的表单，因此我可以在行中提交一些数据。当我在我的生产/开发环境中时，表单如下所示。（我使用路由提供程序来分配控制器）除了按Enter键时我无法提交表单外，所有内容最初都按预期工作。

HTML

 <table>
     <tr>
         <form novalidate ng-submit="addResult(selectedFencer)">
         <td>
            <input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers"  placeholder="Type the fencers name" />
         </td>
         <td>
            <input type="submit" value="Submit"  class="button" />
         </td>
         </form>
     </tr>
 </table>

控制器

angular.module('RankingsApp')
    .controller('CompetitionController', function($scope) {

        $scope.fencers = ["Scott","Laura", "James"];

        $scope.addResult = function(fencer) {
            alert(fencer)
        };
  });

但是，如果我将相同的代码放入plunker / standalone html文件中，它会按预期工作，并在按下enter时提交表单。

http://plnkr.co/edit/3385qhpExge4S5ZdPs1E?p=preview

我最初认为我的问题与代码错误有关，但是如果我在生产代码中将表单移到表外，它会按预期工作。

<form novalidate ng-submit="addResult(selectedFencer)">
<table>
         <tr>

             <td>
                <input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers"  placeholder="Type the fencers name" />
             </td>
             <td>
                <input type="submit" value="Submit"  class="button" />
             </td>

         </tr>
     </table>
 </form>

有没有人建议如何解决这个问题或者我可以采取哪些方法来调试它？

带有typeahead的角形形状适用于plunker / standalone但不适用于生产代码

0 个答案: