0

いくつかのフィールドを持つフォームがあります。ユーザーがすべてのフィールドに入力してフォームを送信すると、フォームを送信する前に、ユーザーに登録またはログイン (モーダル ウィンドウで) を強制します。

つまり、ユーザーがフォームを送信しようとすると、最初にログインフォームでモーダルウィンドウを開きます (ユーザーは登録/ログインフォームを切り替えることができます)。ユーザーがログイン/登録フォームを完了して送信した後、ajax を使用してすべてのデータを送信し、成功ステータスを取得した後、jQuery の $("formID").submit() イベントを使用して前のフォームを送信します。

jQuery から angularJS に移行しているので、angularJS を使用してそれを行うための解決策を見つけようとしましたが、angularJS の$http サービスを使用してユーザー登録/ログイン部分を完了しましたが、以前のフォーム データを送信できませんでした。

そのようなことに対するangularJSソリューションはありますか? ID などを記載したフォームを送信することはできますか?

4

2 に答える 2

0

私はあなたが要求したことをすべてやったと信じています。ライブ デモはこちら (クリック)。

  <div ng-show="successMessage">
    <p>{{successMessage}}</p>
    <h6>Form data sent:</h6>
    <p ng-repeat="(k,v) in form track by k">{{k}}: {{v}}</p>
  </div>
  <form ng-submit="mySubmit()" ng-hide="modalOpen||successMessage">
    <input ng-model="form.name" placeholder="Name">
    <input ng-model="form.phone" placeholder="Phone Number">
    <input type="submit">
  </form>
  <div ng-show="modalOpen">
    <h6>This would be your modal.</h6>
    <p>Login to submit form!<p>
    <button ng-click="login()">Login</button>
  </div>

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {
  $scope.form = {
    name: '',
    phone: ''
  };
  $scope.modalOpen = false;
  $scope.mySubmit = function() {
    $scope.modalOpen = true; 
  };
  $scope.login = function() {
     $scope.loggedIn = true; //should come from a service and use promise, send form after promise resolves using .then()
    //dataService.sendForm() or however you want to submit the form. the same principle applies about using a promise and .then() function to set the successMessage and close modal.
    $scope.successMessage = 'Form is submitted!';
    $scope.modalOpen = false;
  };
});
于 2013-09-08T06:03:06.783 に答える