使用AngularJS提交表单

时间:2017-02-20 21:34:28

标签: angularjs

我对AngularJs很新,我正在尝试提交表单。我用yeoman来生成角度应用程序。这是main.html文件中的代码

<div class="jumbotron">
  <h3>Test</h3>
  <br><br>
  <p class="lead">
    <form name="userForm" ng-submit="loadData()"  ng-controller="myCtrl">
        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>name*</label>
            <input type="text" name="name"  ng-model="name"class="form-control" ng-model="user.name" required>
        </div>
        <br><br>
        <button type="submit" class="btn btn-primary">submit</button> <br><br>
    </form>
  </p>
</div>

这是main.js文件中的代码

angular.module('myApp')
  .controller('MainCtrl', ['$scope', function($scope) 
  {



$scope.loadData = function() {
console.log('submited')
};

}]);

永远不会调用loadData函数。当我将代码添加到main.js文件时,我开始在控制台中收到错误,我不知道它是否与问题有关。

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

1 个答案:

答案 0 :(得分:1)

<div ng-app="myApp" ng-controller="MainCtrl" class="jumbotron">
<h3>Test</h3>
<br><br>
<p class="lead">
<form name="userForm" ng-submit="loadData()"  >
    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
        <label>name*</label>
        <input type="text" name="name"  ng-model="name"class="form-control" ng-model="user.name" required>
    </div>
    <br><br>
    <button type="submit" class="btn btn-primary">submit</button> <br><br>
   </form>
 </p>
</div>

您忘记提及ng-app且控制器中的名称与

不匹配