63

私は 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ファイルはこれとどのようにやり取りすることになっていますか(json文字列をphpファイルの配列に取得する方法)?
  2. チェックボックスがtrueの場合、チェックボックスの値を送信するにはどうすればよいですか?
  3. Angular で jQuery を使用して画像を送信する方法に関する多くの情報を見つけました。この送信には既に画像オブジェクトがあることがわかります。そのデータを取得するにはどうすればよいですか 画像に含める考慮事項は何ですか?

明確で簡潔な情報を喜んで取り入れ、すべての人にとって良い学習例をまとめます...

私のフィドル

4

5 に答える 5

25

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

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

元の答え

私はあなたの 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 フォーム送信を使用していた角度ディレクティブ ( ng-controller、ng-model、 ) を多数使用しています。ng-submit通常、「角度のある方法」のすべての代替手段が機能しますが、フォームの送信は Angular によって傍受され、キャンセルされるため、送信前にデータを操作できます。

しかし、どのタイプの ajax/http post/get も許可しないため、JSFiddle は適切に機能しないため、ローカルで実行する必要があります。

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

更新クックブックはなくなりました。代わりに、フォーム送信の 1.x ガイドをご覧ください。

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

Angularjs は Web 開発プロセス全体を変更します。JQuery や通常の html/js で慣れ親しんだ方法でやろうとしないでください。 .

于 2013-11-14T19:30:44.367 に答える
4

一部のサービスページにデータを送信しています。

<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;
                    });
            }
于 2016-07-19T12:16:29.340 に答える
1

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

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

于 2013-11-20T02:14:52.623 に答える