Question

我有一个带有一些字段的表单。当用户填写所有字段并提交表单时，我强制用户在表单提交之前注册或登录（在模态窗口中）。

也就是说，当用户尝试提交表单时，我首先打开一个带登录表单的模态窗口（用户可以切换注册表/登录表单）。用户完成登录/注册表单并提交后，我使用ajax发送所有数据，在获得成功状态后，我使用jQuery的$（“formID”）。submit（）事件提交上一个表单。

现在，当我从jQuery迁移到angularJS时，我尝试使用angularJS找到解决方案，我已经使用angularJS的 $ http服务完成了用户注册/登录部分，但是失败了提交以前的表格数据。

对那种事情有什么angularJS解决方案吗？是否可以提交带有ID或类似内容的表格？

Answer 1

检查此http://docs.angularjs.org/api/ng.directive:ngSubmit

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

Answer 2

我相信我已经做了你要求的一切。 Live demo here (click).

  <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;
  };
});

如何使用angularJS做jQuery的$（“＃formID”）。submit（）事件？

2 个答案: