web-dev-qa-db-ja.com

Angularjs-シンプルなフォーム送信

私はAngularJsで学習曲線をたどっていますが、実際の使用に役立つ例はほとんどないことがわかりました。

最も標準的なコンポーネントを含むフォームを送信し、PHPファイルに渡す方法を明確に理解しようとしています。

私の フィドル 。

私やおそらく他の多くのAngularjs初心者を助けるシンプルで汚染されていないフォームを提出する良い例はありますか？.

きれいなフォームを言うとき、私はこのようなものに言及しています。

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
        Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>

        <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>

            <br/><br/>

        <input type="radio" ng-model="form.gender" value="female" />Female ...
        <input type="radio" ng-model="form.gender" value="male" />Male <br/>

            <br/><br/>

        <input type="checkbox" ng-model="form.member" value="5"/> Already a member

            <br/><br/>

        <input type="file" ng-model="form.file_profile" id="file_profile"><br/>
        <input type="file" ng-model="form.file_avatar" id="file_avatar">

            <br/><br/>

        <!-- <button ng-click="save()" >Save</button> -->
        <input type="submit" ngClick="Submit" >

    </form>

</div>

Ng-appコード...

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {

     var formData = {
        firstname: "default",
        emailaddress: "default",
        textareacontent: "default",
        gender: "default",
        member: false,
        file_profile: "default",
        file_avatar: "default"
    };

    $scope.save = function() {
        formData = $scope.form;
    };

    $scope.submitForm = function() {
        console.log("posting data....");
        formData = $scope.form;
        console.log(formData);
        //$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/});
    };

 });

ここから3つの質問があります...

  1. 私のPHPファイルはこれと相互作用するはずです（PHPファイルの配列にjson文字列を取得する方法）？
  2. チェックボックスがtrueの場合、どのようにチェックボックスの値を送信しますか？
  3. JQueryでAngularを使用して画像を送信する多くの情報を見つけました。この送信には既に画像オブジェクトがありますが、そのデータを取得するにはどうすればよいですか。画像に含める考慮事項は何ですか？

私は明確で簡潔な情報を受け取り、すべての人のために良い学習例を組み立てるつもりです...

私の フィドル

javascriptphpformsangularjs
63
GRowing

私はかなりの研究を行ってきましたが、別の問題を解決しようとして、他の投稿で解決策のかなりの部分に到達しました：

Angularjs-フォームの投稿データが投稿されませんか？

現在、このソリューションには画像のアップロードは含まれていませんが、明確で適切に機能する例を拡張して作成する予定です。これらの投稿を更新できる場合は、安定した学習しやすい例からコンパイルされるまで、常に最新の状態に保ちます。

2
GRowing

警告これはAngular 1.x用です

Angular（v2 +、現在のバージョン8）を探している場合は、これを試してください answer または 公式ガイド 。

元の回答

私はあなたのJSフィドルをここに書き直しました： http://jsfiddle.net/YGQT9/

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" name="form.firstname">    
        <br/><br/>

        Email Address: <br/><input type="text" ng-model="form.emailaddress"> 
        <br/><br/>

        <textarea rows="3" cols="25">
          Describe your reason for submitting this form ... 
        </textarea> 
        <br/>

        <input type="radio" ng-model="form.gender" value="female" />Female
        <input type="radio" ng-model="form.gender" value="male" />Male 
        <br/><br/>

        <input type="checkbox" ng-model="form.member" value="true"/> Already a member
        <input type="checkbox" ng-model="form.member" value="false"/> Not a member
        <br/>

        <input type="file" ng-model="form.file_profile" id="file_profile">
        <br/>

        <input type="file" ng-model="form.file_avatar" id="file_avatar">
        <br/><br/>

        <input type="submit">
    </form>
</div>

ここでは、基本的なhtmlフォーム送信を使用していた多くのangularディレクティブ（ng-controller、ng-model、ng-submit）を使用しています。通常、「angular way」のすべての代替手段が機能しますが、フォーム送信はAngularによってインターセプトおよびキャンセルされ、送信前にデータを操作できるようになります。

しかしJSFiddleは、どのタイプのajax/http post/getも許可しないため、正しく動作しません。ローカル。

angularフォーム送信に関する一般的なアドバイスについては、 cookbook examples を参照してください

UPDATEクックブックはなくなりました。代わりに form submission の1.xガイドをご覧ください

angularのクックブックには、ドキュメントがあまりユーザーフレンドリーではないので役立つサンプルコードがたくさんあります。

AngularjsはWeb開発プロセス全体を変更します。JQueryや通常のhtml/jsで慣れている方法を試してはいけませんが、ほとんどの場合、angular代替。

25
caffeinated.tech

サービスページにデータを送信します。

<form class="form-horizontal" role="form" ng-submit="submit_form()">
    <input type="text" name="user_id" ng-model = "formAdata.user_id">
    <input type="text" id="name" name="name" ng-model = "formAdata.name">
</form>

$scope.submit_form = function()
            {
                $http({
                        url: "http://localhost/services/test.php",
                        method: "POST",
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param($scope.formAdata)
                    }).success(function(data, status, headers, config) {
                        $scope.status = status;
                    }).error(function(data, status, headers, config) {
                        $scope.status = status;
                    });
            }
4
Akhilesh Kumar

AngularJSがフォーム送信についてあまり語らないのは、「双方向のデータバインディング」に依存しているためだと思います。従来のhtml開発では、一方向のデータバインディングがありました。つまり、DOMに加えた変更をDOMでレンダリングすると、JSオブジェクトに反映されませんでしたが、AngularJSでは双方向に機能します。したがって、実際に提出する必要はありません。フォームを送信する必要なく、AngularJSを使用して中規模のアプリケーションを作成しました。フォームを送信したい場合は、ENTERキーダウンとSUBMITボタンクリックイベントを処理し、form.submit（）を呼び出すフォームをラップするディレクティブを記述できます。

このようなディレクティブのサンプルソースコードが必要な場合は、これにコメントしてお知らせください。自分で書くことができる単純な指令だと思いました。

1
D.S