ngSubmit 没有被提交答案

【问题标题】：ngSubmit not getting submittedngSubmit 没有被提交
【发布时间】：2015-03-23 07:58:19
【问题描述】：

我是 AngularJS 的初学者，我正在尝试提交一个表单，如下所示：

<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController">   </div>

这是我的 searchForm.html：

<div class="container">
<div class="row">
    <div class="col-md-14">
        <div class="well">
          <div class="col-md-9">
                <form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
                        <div class="form-group">
                            <label for="teamName" class="col-md-3 control-label">Team name</label>
                            <div class="col-md-9">
                                <input type="text" ng-model="myName" id="myName" class="form-control">
                            </div>
                        </div>
           </div>
<div class="row">
                 <div class="col-md-0"></div>
                     <button ng-click="onFormReset()" class="btn btn-default">Reset</button>
                     <input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
                </form>

            {{teamName}}
      </div>
  </div>
</div>

更新

控制器：

angular.module('MyApp')
  .controller('MySearchFormController', ['$scope', function($scope){
    $scope.submit = function (){

      if ($scope.myName) {
        alert($scope.myName);
        $scope.teamName = this.teamName;
      }
    }
  }]);

目前正在发生的是文本自动出现在 {{teamName}} 字段中。相反，我想让它只在 onSubmit() 上工作，即单击 Search 按钮。

【问题讨论】：

你能展示你的控制器吗？
我刚刚编辑了它。
其实this.teamName指的是$scope.submit方法的作用域。我想你想做$scope.teamName = $scope.myName;

标签： javascript angularjs html forms

【解决方案1】：

你可以这样试试：

function demo ($scope) {
  
  $scope.submit = function () {
    $scope.submitted = true;
  };
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">

  <form ng-submit="submit()">
    <input type="text" ng-model="teamName">
    <button>Submit</button>
  </form>
  
  <p ng-if="submitted">{{ teamName }}</p>
  
</div>

但是这不是最优的，因为一旦你提交了一次，$scope.submitted 就是true，你会再次遇到同样的问题。

所以，我建议您不要将 {{ teamName }} 绑定到与输入相同的引用：

function demo ($scope) {
  
  $scope.submit = function () {
    
    $scope.teamNameCopy = angular.copy($scope.teamName);
    
  };
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">
  
  <form ng-submit="submit()">
    <input type="text" ng-model="teamName">
    <button>Submit</button>
  </form>
  
  <p>{{ teamNameCopy }}</p>
  
</div>

【讨论】：

感谢分享，meriadec。您的 sn-p 包含我正在尝试做的事情，但我的代码中可能存在另一个问题，因为它再次没有运行。顺便说一句，我如何编辑主题的主题？它应该是 not 而不是 now。

【解决方案2】：

好的，问题解决了。

不幸的是，这是一个与错误关闭 html 标签有关的问题，而不是

【讨论】：