34

私はAngularJSの魚で、このシナリオがあります。

<form>
    <input type="text">
</form>
<button type="submit">submit</button>

通常、AngularJS はフォーム内の属性として機能する ng-submit ディレクティブを提供しますが、外部で呼び出す必要があります。

それで、誰かが同じ問題を経験しましたか？はいの場合、何をしましたか？

4

10 に答える 10

52

HTML5 のform属性を使用します。サンプルは次のとおりです。

angular.module('app', [])

.controller('MyCtrl', ['$scope', function($scope) {
  $scope.submitted = false;
  
  $scope.confirm = function() {
    $scope.submitted = true;
  };
}]);
form {
  padding:5px;
  border: 1px solid black
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
  
  <form id="myform" ng-submit="confirm()">
    <label for="myinput">My Input</label>
    <input type="text" id="myinput" name="myinput">
  </form>
  <br>
  
  <input type="submit" value="Submit" form="myform">
  
  <p ng-show="submitted">
    The form was submitted
  </p>

</body>
</html>

于 2015-02-10T12:57:10.463 に答える
17

コードを ng-controller で囲み、<form> の範囲外のボタンで ng-click を使用してください。

jsfiddle でサンプルを作成します...試してみてください：

http://jsfiddle.net/xKkvj/2/

<div ng-app>
    <div ng-controller="Ctrl">
        <form ng-submit="submit()">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>
        <button ng-click="submit()">Submit 2</button>
    </div>
</div>

jsを使用：

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = 'hello';
    $scope.submit = function () {
        if ($scope.text) {
            $scope.list.push($scope.text);
            $scope.text = '';
        }
    };
}
于 2013-09-04T13:06:03.243 に答える
2

すべての素晴らしい答えですが、すべてのオプションがレイアウトされた超ソリューション: http://plnkr.co/edit/VWH1gVXjP2W9T9esnVZP?p=preview

  <form ng-submit="submit()" name="jForm" id="jForm" onsubmit="event.returnValue = false; return false;">
    <input type="text" class="form-control" placeholder="try to hit the enter key in here" />
    <div class="btn btn-default" id="tap">
      Tap me
    </div>

    <div ui-submit="" class="btn btn-primary">Submit form</div>
  </form>
  <ui-submitform class="btn btn-primary" formsubmitfunction="submit()">Submit form 2</ui-submitform>
  <button onclick="$('#jForm').submit()">jquery Submit</button>

@mk の拡張と @joaozito-polo からのアイデアの結合:

app.directive('uiSubmitform', function()
{
    // need this to make sure that you can submit your form by simply pressing the enter key in one of the input fields
    return {
     restrict: 'E',
     link: function(scope, element, attrs)
     {
        element.onTrigger(function()
        {
          //scope.$apply(attrs.formsubmitfunction); 
            scope.$eval(attrs.formsubmitfunction);
        });
     }
 };
});
于 2015-02-12T07:56:33.297 に答える
1

簡単な答えhttp://jsfiddle.net/84bodm5p/を見てください

私にとって最も簡単な方法は、外部提出用の特別なディレクティブを作成することです。

重要 フォーム要素には適切な event .triggerHandler('submit') のみを使用してください

$scope.$on('makeSubmit', function(event, data){
              if(data.formName === $attr.name) {
                $timeout(function() {
                  $el.triggerHandler('submit'); //<<< This is Important

                  //equivalent with native event
                  //$el[0].dispatchEvent(new Event('submit')) 
                }, 0, false);   
              }
            })

ここで私の答えを見てくださいAngularJSでプログラムによってフォーム送信をトリガーする方法は?

于 2016-06-26T12:50:22.517 に答える
-3

Angular では、フォームを送信しません (少なくとも角度のある方法では)。必要なのは、フォームに入力したときにやりたいことを実行する関数だけです。

その関数を呼び出すだけで<button>準備完了です。

例：プランカー

于 2013-09-03T16:22:58.953 に答える