Question

我开始创建一个AngularJS表单，我的AngularJS应用程序的其他部分工作得很好。

html文件看起来像这样

<form role="form" ng-submit="submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"
           ng-click="submitForm()" />
</div>
</form>

控制器

  var QuestionEditController = function ($location, questionService, $env) {

    var employee = {};

    console.log('pre employee', employee);  // this works

    submitForm = function () {

        console.log('employee', employee);  // clicking on submit button does not make it in here

    };

我正在使用ui-router，看起来像这样

     .state("editquestion",
            {
                url: "/editquestion",
                templateUrl: viewBase + "questionEdit.html",
                controller: "QuestionEditController",
                controllerAs: "vm"
            });

};

我有一个简单的指令，它只是显示html代码模板，但我看不出这会导致问题，我做错了什么？

更新

好的，问题确实是ng-click。

然而，我想知道我是否在创建更多的“混乱”外观我甚至在submitForm前面添加了什么（vm。）

新HTML

<form role="form" ng-submit="vm.submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="vm.employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"/>
</div>
</form>

控制器已更新

var QuestionEditController = function ($location, questionService, $env) {

    var vm = this;

    vm.employee = {};

    console.log('pre employee', vm.employee);

    vm.submitForm = function () {

        console.log('employee', vm.employee);

    };

};

我正在做什么，有些还是没有？

Answer 1

由于documentation您不需要ng-click指令来解雇ng-submit。只需在表单元素中使用type="submit"的输入，就可以了。按下表单中的提交按钮将触发ng-submit。

<form role="form" ng-submit="vm.submitForm()">
    <div class="form-group">
        <label for="fullName">Name</label>
        <input type="text" 
               id="fullName" 
               name="fullName" 
               class="form-control" 
               ng-model="vm.employee.fullName" />
    </div>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" 
               class="btn btn-primary" value="Submit" />
    </div>
</form>

确保您的提交功能是基于控制器或基于范围的功能，以便能够通过视图调用：

var QuestionEditController = function ($location, questionService, $env) {
    var vm = this
    vm.employee = {};
    vm.submitForm = function () {
        console.log('employee', employee);  
    };
};

Answer 2

制作您的功能范围，以便从表单访问。

删除ng-click，因为您使用的是ng-submit，如@lin提到的

 $scope.submitForm = function () {
   console.log('employee', employee); 
};

更新了

如果你没有在控制器中使用范围，那么将this分配给变量并使用控制器，如html

ng-controller="ctrl as vm"

演示

var QuestionEditController = function ($scope) {
    var vm  = this
    vm.employee = {};

    console.log('pre employee', vm.employee);  // this works

    vm.submitForm = function () {
        console.log('employee', vm.employee); 
    }; 
   }
    
    angular.module("app",[])
.controller("ctrl",QuestionEditController)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
 <form role="form" ng-submit="vm.submitForm()">

    <div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control" ng-model="vm.employee.fullName" />
    </div>

    <div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
</form>
</div>

Answer 3

          <html lang="en" ng-app="demo">
          <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" 

   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script>
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
 </script>
  <script 
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
        <script src="angular.js"></script>
    <script>
        angular.module("demo",[])
        .controller("cc",function($scope){
            $scope.students = 
 ["student1","student2","student3","student4","student5","student6","student7","student8"]
        })


    </script>

<body>

        <div class="container"></div>
       <div class="row">
      <div class="col-md-4 "><strong> Batch 1</strong> </div>

     <div class="col-md-4 col-md-offset-4 pull-right" > <strong> Venu 4</strong>
 </div>


 </div>

    <div class="panel panel-default">
   <!-- Default panel contents -->
   <div class="panel-heading"><strong>Name</strong></div>


  </div>

  <!-- List group -->
        <div ng-controller="cc">
        <ul class="list-group" ng-repeat="student in students">
        <li class="list-group-item">{{student}}</li>
  </ul>
</div>
        </body>
</html>

Answer 4

无需处理ng-click事件即可提交表单。使用type =“submit”

<form role="form" ng-submit="vm.submitForm()">
    <div class="form-group">
        <label for="fullName">Name</label>
        <input type="text" 
               id="fullName" 
               name="fullName" 
               class="form-control" 
               ng-model="vm.employee.fullName" />
    </div>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" 
               class="btn btn-primary" value="Submit" />
    </div>
</form>

AngularJS表单未提交ng-click事件

4 个答案: