js STUDIO

ngSubmit

概要

onsubmitイベントに対し、Angular式の紐付けを有効にします。

加えて、action属性がフォームに含まれていない場合のみ、 デフォルトのアクション(フォームがリクエストをサーバに送り、現在のページがリロードされる)をキャンセルします。

使用方法 

<form ng-submit="{expression}">
   ...
</form>

引数

引数 説明
ngSubmit

型：式

評価される式を指定します。 (イベントオブジェクトは、$eventとして利用可能です。)

デモ 

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form ng-submit="submit()" ng-controller="Ctrl">
      Enter text and hit enter:
      <input type="text" ng-model="text" name="text" />
      <input type="submit" id="submit" value="Submit" />
      <pre>list={{list}}</pre>
    </form>
  </body>
</html>

function Ctrl($scope) {
  $scope.list = [];
  $scope.text = 'hello';
  $scope.submit = function() {
    if (this.text) {
      this.list.push(this.text);
      this.text = '';
    }
  };
}

it('should check ng-submit', function() {
  expect(binding('list')).toBe('[]');
  element('.doc-example-live #submit').click();
  expect(binding('list')).toBe('["hello"]');
  expect(input('text').val()).toBe('');
});
it('should ignore empty strings', function() {
  expect(binding('list')).toBe('[]');
  element('.doc-example-live #submit').click();
  element('.doc-example-live #submit').click();
  expect(binding('list')).toBe('["hello"]');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.list = [];
  $scope.text = 'hello';
  $scope.submit = function() {
    if (this.text) {
      this.list.push(this.text);
      this.text = '';
    }
  };
}
</script>
  </head>
  <body>
    <form ng-submit="submit()" ng-controller="Ctrl">
      Enter text and hit enter:
      <input type="text" ng-model="text" name="text" />
      <input type="submit" id="submit" value="Submit" />
      <pre>list={{list}}</pre>
    </form>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。