Question

我的html表单如下所示：

    <div class="container">
    <div class="form-group" ng-controller="studentController">
    <form role="form" class="well form-horizontal" id="registerForm" name="forms.registerForm">
      <div class="form-group">
        <label class="col-md-4 control-label">First Name </label>
        <input ng-model="formdata.firstname" required type="text" name="firstname">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Middle Name </label>
        <input ng-model="formdata.middlename" required type="text" name="middlename" maxlength="1">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Last Name </label>
        <input ng-model="formdata.lastname" required type="text" name="lastname">
      </div>
      <div class="form-group">
        <label for="email" class="col-md-4 control-label">E-mail address</label>
        <input ng-model="formdata.email" required type="email">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Student ID</label>
        <input ng-model="formdata.studentid" required type="number">
      </div>
      <div required class="form-group">
          <label class="col-md-6 control-label">
              level
          </label> <br>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="300" checked>
            300 </label>
        </div>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="400">
            400 </label>
        </div>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="500">
            500 </label>
        </div>
      </div>
          <div class="form-group" align="center">
      <input type="file" ngf-select ng-model="formdataa.file" name="file" ngf-pattern="'application/pdf'" accept="'.pdf'" ngf-max-size="5MB" required ngf-model-invalid="errorFile">

</div>
<div class="container" align="center">
        <button class="btn btn-register" ng-click="tempData()" ng-disabled="forms.registerForm.$invalid" >Submit</button>
    </div>

下面是用于在服务器中存储表单和文件详细信息的有角度的javascript代码。

$scope.tempData = function(ev){
        console.log($scope.formdata);
var confirm = $mdDialog.confirm()
      .title('Are you sure you want to delete this user?')
      .ok('YES')
      .cancel('CANCEL');
        $mdDialog.show({
                locals:{formdata: $scope.formdata, dataToPassFile: $scope.formdataa}, //here where we pass our data
                controller: _DialogController,
                controllerAs: 'vd',
                templateUrl: 'scripts/app/studentdialog/studentdialog.html',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: true

            })
            .then(
                function(answer) {},
                function() {

                }
            );
    };

function _DialogController($scope, $mdDialog, formdata,dataToPassFile) {
     $scope.closeDialog = function() {
          $mdDialog.hide();
     };
    $scope.firstname = formdata.firstname;
    $scope.lastname = formdata.lastname;
    $scope.middlename = formdata.middlename;
    $scope.studentid = formdata.studentid;
    $scope.email = formdata.email;
    $scope.type = formdata.type;
    $scope.file = dataToPassFile.file;
    console.log('FIle Passed' +dataToPassFile.file);
$scope.tfile = function () {
        console.log("TFIle Called");
        if ($scope.forms.registerForm.file.$valid && $scope.formdataa.file) {
            $scope.upload($scope.formdataa.file);
        }
    };
    $scope.upload = function (file) {
            file.upload = Upload.upload({
                url: $rootScope.baseURL + 'php/uploadT.php',
                method: 'POST',
                data: {
                    'file': file,
                    'userId': $scope.formdata.firstname, 
                    'type': $scope.formdata.type
                },
            });
$scope.register = function () {
        console.log("clicked");
        $scope.loading = true;
        AppServices.register($scope.formdata)
            .then(function (result) {
                if (Object.keys(result).length > 0) {
                    // update current users list
                    if (result.type == '300' || result.type == '400') {
                        $scope.users.300.push(result);
                    } else {
                        console.log(result);
                        $scope.users[result.type] = result;
                    }

                    $scope.forms.registerForm.$setPristine();
                    $scope.forms.registerForm.$setUntouched();
                    $scope.msg = {};
                    $scope.msg.successRegister = 'Registered Successfully';
                } else {
                    $scope.msg = {};
                    $scope.msg.errorRegister = 'Email already exists!';
                }
            })
            .finally(function (data) {
                $scope.loading = false;
            });
    };

当用户单击“提交”按钮时，我要创建一个确认页面，该页面将再次为用户提供所有详细信息，以便用户可以确认然后实际提交表单。请让我知道如何使用localStorage来同时存储和检索数据以进行确认页面。预先谢谢你！

更新：我创建了一个MDDialog并在单击按钮时调用它，现在我也可以在MDDialog中看到所有数据。当用户单击“确定”时，我希望将页面上的数据（而不是MDDialog上的数据）提交到后端（php）中，该怎么办？

Answer 1

为什么不在模态上显示此信息，并在模态关闭后在您所在的同一控制器中调用确认功能。这样，您将不需要任何缓存策略。

在使用AngularJS提交表单之前显示预览/编辑选项

1 个答案: