ng-submit不在angularjs中工作

时间:2014-02-17 14:24:12

标签: javascript angularjs ng-submit

我的观点:

<div class="modal" tabindex="-1" role="dialog" ng-controller="LocationController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">
          Add a Location
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" ng-submit="createLocation()">
          <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="Warehouse A, Row 15, Shelf BC1, etc" ng-model="name">
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="warehouse, row, shelf, etc" ng-model="type">
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

我的控制器:

angular.module('mean').controller('LocationController', ['$scope', '$location', '$rootScope', 'LocationService', '$modal', '$routeParams', function ($scope, $location, $rootScope, LocationService, $modal, $routeParams) {

  $scope.createLocation = function() {
alert('afds');
    LocationService.create(this).then(function(response) {
      console.log(response);
    });
  }

}]);

然而,当我点击保存时,我没有得到警报。不知道那里发生了什么。

6 个答案:

答案 0 :(得分:39)

感谢Matt Waycomment - 结果我的保存按钮不在我的表单中。固定

答案 1 :(得分:21)

即使按钮位于表单内且ng-submit仍然无效,请将按钮type更改为提交

<button type="submit" class="btn btn-success" ng-click="login()">Login</button>

P.S:在我将按钮类型更改为submit之前,其他答案对我没有帮助。希望这会有所帮助。

答案 2 :(得分:7)

也许你应该在表单标记上添加'novalidate'属性,以避免本地浏览器验证https://docs.angularjs.org/guide/forms

答案 3 :(得分:2)

这也会影响,表单中必须有一个提交按钮(按钮或输入类型=“提交”),否则ng-submit将无效。

答案 4 :(得分:1)

对我来说,问题是其中一个表单字段上的'required'标记。删除此标记后,表单再次起作用。解决此类问题的旧方法是尝试对表单的一部分进行注释并运行代码。

我更喜欢在表单上使用'novalidate'标签,而使用type =“submit”的按钮,以便通过angular完成表单的验证。

答案 5 :(得分:-3)

有史以来最愚蠢的错误,请确保您正在编译您的js代码。