$http.post 上的预加载器（多步骤形式）

Question

我无法在我的表单中提供预加载器。我已经按照 this 教程在我的 laravel 项目中创建了一个 多步骤表单 。

这是我的基础form.html:

<form id="appointment-form" name="appointmentform" ng-submit="processForm(appointmentform.$valid)">
    <!-- our nested state views will be injected here -->
    <div id="form-views" ui-view></div>
</form>

我的第一步表格是form.license.html:

<!-- form-license.html -->
<label>Nummerplaat ingeven</label>
<div class="form-group">
    <div class="col-xs-8 col-xs-offset-2">
        <input required type="text" class="form-control" name="license" ng-model="formData.license">

    </div>
</div>

<div class="form-group row">
    <div class="col-xs-4 col-xs-offset-4">
        <a ng-click="next(1)" ui-sref="form.profile" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
            Volgende
        </a>
    </div>
</div>

在我的控制器中，我有以下内容：

$scope.next = function(step){

    if(step == 1) // licensePlate
    {
        // receive customer data
        $http.post('/api/licenseplate', { license: $scope.formData.license })
            .success(function(data, status, headers, config){
                var item = data.item;

                console.log(item);

                if(item) // fill in the name, address, email and telephone number
                {
                     $scope.formData.profile.name = item.owner_name;
                     $scope.formData.profile.street = item.owner_street;
                     $scope.formData.profile.zipcode = item.owner_zipcode;
                     $scope.formData.profile.city = item.owner_city;
                     $scope.formData.profile.email = item.owner_email[0];
                     $scope.formData.profile.telephone = item.owner_tel_no[0];
                }
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
    else if(step == 2)
    {
        // save customer data

        // get calendar appointments
        var current_date = (m+1) + '/' + d + '/' + y;

        $http.post('/api/calendar', { date: current_date })
            .success(function(data, status, headers, config){
                console.log(data);

                var item = data.items.item;

                item.sort(function(a, b) {
                    return a.column_id - b.column_id;
                });

                $scope.calendarData.pop();
                $scope.calendarData.push(item);

            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });

    }
};

// function to process the form
$scope.processForm = function(isValid) {

    var appointment_date    = $scope.formData.appointment_date;
    var appointment_hour    = $scope.formData.appointment_hour;
    var column_id           = $scope.formData.column_id;
    var profile             = $scope.formData.profile;

    $http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
        .success(function(data, status, headers, config){
            $location.path('/form/success/');
        })
        .error(function(data, status, headers, config) {
            console.log("Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + headers +
                "<hr />config: " + config);
    });
};

如您所见，当步骤等于 1 时，我创建了一个 $http.post。现在，当我单击下一步时，第二个表单直接加载 。如果 http.post 成功加载，只想转到第二种形式。

我尝试使用一些 angularjs 预加载器库 ($http) 来执行此操作，但没有任何效果。有人有关于我如何提供这个的好例子吗？

Answer 1

您可以从控制器重定向到状态 form.profile：

<div class="col-xs-4 col-xs-offset-4">
    <button ng-click="next(1)" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
        Volgende
    </button>
</div>

并在控制器中

$scope.next = function(step){

    if(step == 1) // licensePlate
    {
        // receive customer data
        $http.post('/api/licenseplate', { license: $scope.formData.license })
            .success(function(data, status, headers, config){
                var item = data.item;

                if(item) // fill in the name, address, email and telephone number
                {
                     $scope.formData.profile.name = item.owner_name;
                     $scope.formData.profile.street = item.owner_street;
                     $scope.formData.profile.zipcode = item.owner_zipcode;
                     $scope.formData.profile.city = item.owner_city;
                     $scope.formData.profile.email = item.owner_email[0];
                     $scope.formData.profile.telephone = item.owner_tel_no[0];
                }

                // go to form.profile
                $state.go('form.profile');
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
    else {
        ...
    }
}

$http.post 上的预加载器（多步骤形式）

Preloader on $http.post (multi-step form)

javascript

ajax

jquery

preloader

angularjs