ng-submit或ng-click响应表单中的提交按钮

时间:2014-01-20 16:21:35

标签: forms angularjs

我正在尝试在angularjs中创建一个非常简单的登录表单,但似乎ng-submit()和ng-click指令似乎都没有工作。

我在这里创建了一个非常基本的plunker示例:http://plnkr.co/edit/BrLIxSZggZofCBoZpjT4?p=preview 其中/ ng-click或ng-submit中的任何一个都应该打开一个带有'a'字母的简单警报窗口。但是当我点击登录按钮时没有任何反应。更有趣的是,如果我将ng-app更改为ng-app =“test”,那么表单会被提交,但警报也不会被调用。

我做错了什么?

基本示例:          

<head>
  <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app>
  <!-- Login -->
  <form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
   ng-submit="alert('a')" ng-controller="Ctrl">

    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
    <input type="submit" ng-click="alert('a')" name="login" value="Sign in" />

  </form>
  <!-- / Login -->
</body>

</html>

1 个答案:

答案 0 :(得分:8)

ng-submit指令调用应该在控制器中的函数。 如果表单字段有效,将触发ng-submit指令

<强>表单/ HTML

<form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
   ng-submit="submit()" ng-controller="Ctrl">
    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
    <input type="submit" name="login" value="Sign in" />
</form>

<强>控制器

function Ctrl($scope) {
    $scope.model = {};
    $scope.submit = function(){
        alert('a');
    }
}

<强> Plunkr