Question

我在下面有一个注册表单，我想要实现的是当用户点击按钮时显示加载图像并在提交表单时隐藏。

<script>
    angular.module('AngularJSLoginReg', [])
    .controller('AngularLoginRegController', ['$scope', '$http', function($scope, $http) {
        this.regForm = function() {

            var user_data='user_username=' +this.inputData.username+'&user_password='+this.inputData.password+'&user_role='+this.inputData.role;


            $http({
                method: 'POST',
                url: 'regiter.php',
                data: user_data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .success(function(data) {
        console.log(data);

                if ( data.trim() === 'success') {
                    $scope.successMsg = "Signup Successful";



                } else {
                    $scope.errorMsg = "Problem with Data";
                }

            })


        }



    }]);
    </script>

我试过了

$("#loading").show();
$("#loading").hide();

在html我添加但无法让它工作

<span id="loading">Loading Please wait...</span>
<button type="submit" class="btn btn-primary pull-left"> Register</button>

Answer 1

您可以隐藏和显示装载程序。

<span id="loading" ng-show="loading">Loading Please wait...</span>


angular.module('AngularJSLoginReg', [])
    .controller('AngularLoginRegController', ['$scope', '$http', function ($scope, $http) {
        $scope.loading = false;
        this.regForm = function () {
            $scope.loading = true;
            var user_data = 'user_username=' + this.inputData.username + '&user_password=' + this.inputData.password + '&user_role=' + this.inputData.role;
            $http({
                    method: 'POST',
                    url: 'regiter.php',
                    data: user_data,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .success(function (data) {
                    console.log(data);
                    $scope.loading = false;
                    if (data.trim() === 'success') {
                        $scope.successMsg = "Signup Successful";
                    } else {
                        $scope.errorMsg = "Problem with Data";
                    }
                }).catch((err)=>{
                    $scope.loading = false;
                })
        }
    }]);

Answer 2

您可以在$ scope中使用变量，并使用ng-show来显示或隐藏它。

<span id="loading" ng-show="loaders.register">Loading Please wait...</span>

<script>
angular.module('AngularJSLoginReg', [])
.controller('AngularLoginRegController', ['$scope', '$http', function($scope, $http) {
	$scope.loader = {
			"register":false // by default false
			// you can declare more here if there are some more loaders in the page
	}
	this.regForm = function() {
		var user_data='user_username=' +this.inputData.username+'&user_password='+this.inputData.password+'&user_role='+this.inputData.role;
		$scope.loader.register=true; // show loader on start of call
		$http({
			method: 'POST',
			url: 'regiter.php',
			data: user_data,
			headers: {'Content-Type': 'application/x-www-form-urlencoded'}
		})
		.success(function(data) {
			console.log(data);
			if ( data.trim() === 'success') {
				$scope.successMsg = "Signup Successful";
				}
			else {
				$scope.errorMsg = "Problem with Data";
			}
			$scope.loader.register=false;   // hide when Response comes
		})
	}
}]);
</script>

Answer 3

如果您希望按$scope加载，只需在用户点击后运行它，然后在加载结束时让它做出决定。

$scope.save = function(){
     $scope.loading = true;
     $http({
            method: 'POST',
            url: 'regiter.php',
            data: user_data,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .success(function(data) {
           if ( data.trim() === 'success') {
              //do somthing
           }else{
              //do somthing
           }

           //always it's false 
           $scope.loading = false;
        }, function(error){
           //on error
           $scope.loading = false;
        })
    }
}

查看

<div ng-if="loading"><img alt="loading" src="loading.gif"/></div>

Answer 4

您可以创建一个标志来告知http请求是否已完成。出于演示目的，我使用$timeout代替真正的http请求。

e.g。

this.submittedFinished = false;
  this.submit = (myForm) => {
    $timeout(() => {
      this.submittedFinished = true;
      myForm.$setPristine();
      this.someInput = null;
    }, 1000);

然后在视图中，您可以使用form controller api并配置您的CSS。它可能是这样的：

<form name="myForm" ng-submit="app.submit(myForm)" ng-class="{'finished':app.submittedFinished}" novalidate>
    <label for="someInput">Some Input</label>
    <input ng-model="app.someInput" name="someInput" type="text" id="someInput" required>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
    <img ng-show="myForm.$submitted && !app.submittedFinished" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif">
  </form>

和css：

form {
  position: relative;
}

form.ng-submitted input,
form.ng-submitted button {
  display: none;
}

form.ng-submitted.finished input,
form.ng-submitted.finished button {
    display: block;
}

Here's a working fiddle.

如何显示和隐藏在angularjs中加载img

4 个答案: