AngularJS等待提交表單（ng-submit）

Question

我有一個表格，在此表格中，我會在加載時提交此表格。

我希望在加載此頁面時等待幾秒鍾，然后提交此表單。 我不想使用任何按鈕提交此表單，它應該是“自動提交”表單。 可能嗎？

我的HTML頁面代碼如下

<form name="main" ng-submit="submitForm(main_1)">
    <table align="center">
        <tr>
            <td>First Name :</td>
            <td>
                <input type="text" id="txtFirstname" name="txtFirstname" ng-model="verifyData.firstName" /></td>
            <td>Middle Initial :</td>
            <td>
                <input type="text" id="txtMiddlename" name="txtMiddlename" ng-model="verifyData.middleInitial" /></td>
        </tr>
    </table>
    <img src="images/loader.gif" id="loading-image" ng-if="showLoader">
    <div id="load1" ng-if="showLoader"></div>
</form>

我的控制器代碼如下

angular.module(appConfig.appName)
    .controller('appController', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            window.history.forward();
        });

        $scope.showLoader = false;
        var firstName = document.getElementById('txtFirstname');
        if (firstName != null) {
            var lastName = document.getElementById('txtLastname');
        }

        $scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }

        if ($scope.verifyData) {
            $scope.submitForm();
        }
    }])
]);

我正在使用AngularJS。

Answer 1

您可以嘗試Angular的超時服務

$timeout(function () {
        $scope.submitForm();
    }, 2000);

Answer 2

使用$ timeout方法調用特定時間間隔后自動提交

$timeout( function(){
        // call submitform method
    }, 5000 );

Answer 3

在控制器初始化2秒后，使用$ timeout提交表單： $timeout($scope.submitForm, 2000)

Answer 4

也許您可以使用$ timeout，或者如果您要在提交結束時再做其他事情，則可以使用Promises。

$timeout( function(){ // code }, 3000 );

要么

Some_Function().then(function(){ //YourCode });

Answer 5

Write the code in $timeout (Note :- Just Insert $timeout as a dependency otherwise it will give error)

像這樣.controller（'appController'，['$ rootScope'，'$ scope'，'$ state'，'$ window'，'globalService'，'dataServices，'$ timeout'，function（$ rootScope，$ scope ，$ state，$ window，globalService，dataServices，$ timeout）

For example :- 
$scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }
$timeout(function(){
 $scope.submitForm();
}, 5000);

Answer 6

一個簡單易用的方法就是這樣做

在您的視圖（HTML）中-禁用提交按鈕
<button ng-readonly="button_readonly" ng-disabled="button_disabled" name="Submit">SUBMIT</button>

在控制器中，這些值最初設置為false
$scope.button_readonly = false;
$scope.button_disabled = false;

因為角度數據綁定。 然后您可以執行邏輯。
如果邏輯成功返回（無論是ajax還是輸入驗證等），則可以將上述值設置為true

成功時：
設為true
$scope.button_readonly = true;
$scope.button_disabled = true;

此時：您的按鈕現在可以單擊。 因此，准備將其推送（提交）到php

在PHP中
if(isset($_POST['Submit'])){
//do your thing
}

回答您的問題。 由於您不想使用按鈕，因此將hidden屬性添加到按鈕。 然后定期檢查值是否已更改。 當他們這樣做時，添加提交邏輯。 即。 如果button_readonly = true; 提交