Question

如何在我的表单提交时添加一个微调器（然后它转到另一个/路由）

我已经完成的工作如下：

Angularjs

$scope.submit = function() {
    $http.post('/option', {
        firstName: $scope.firstName,
        lastName: $scope.lastName,
    }).then(function(res) {
        sessionStorage.setItem("flight", JSON.stringify(res.data));

        $location.path("/option");
        $scope.setDelay = function(){
            $scope.delay = true;
            $timeout(function(){
                $scope.delay = false;
            }, 2000);
        };
        });

HTML

按钮提交（我想在点击提交时显示微调器（））

<md-button name="submit" ng-click="submit(); setDelay()" class="md-raised">Find</md-button>

<div>显示微调器

<div class="loading-div" ng-show="delay">
    <img src="spinner.gif">
</div>

Answer 1

在提交函数中

1，设置$ scope.delay = true;

2 in post return .then（function（res）{，set $ scope.delay = false;

这是你想要的吗？

Answer 2

您可以在提交方法中输入加载标记：

$scope.submit = function() {
    $scope.delay = true; //but I would name it as loading :P
    $http.post('/option', {
        firstName: $scope.firstName,
        lastName: $scope.lastName,
    }).then(function(res) {
        $scope.delay = false;
        sessionStorage.setItem("flight", JSON.stringify(res.data));
        $location.path("/option");
    });

然后你的html只需要调用提交功能：

<md-button name="submit" ng-click="submit();" class="md-raised">Find</md-button>

无论如何，你的setDelay函数在$ http.post的成功回调中定义，我错了。

Answer 3

您希望它恰好是2秒，或者您认为用户从服务器收听回来可能需要什么？如果它是第二个选项，那么你应该在http请求之前切换你的布尔值，如下所示：

$scope.submit = () => {
    $scope.delay = true;
    $http.post('/option', {
      firstName: $scope.firstName,
      lastName: $scope.lastName,
    }).then(res => {
      sessionStorage.setItem("flight", JSON.stringify(res.data));
      $scope.delay = false;
      $location.path("/option");
   })
}

和HTML

<md-button name="submit" ng-click="submit()" class="md-raised">Find</md-button>
<div class="loading-div" ng-if="delay">
  <img src="spinner.gif">
</div>

应该这样做

Answer 4

<md-button name="submit" ng-click="submit()" class="md-raised">Find</md-button>

<div class="loading-div" ng-if="delay">
   <img src="spinner.gif">
</div>



$scope.submit = function() {
  $scope.delay = true;
  $http.post('/option', {
    firstName: $scope.firstName,
    lastName: $scope.lastName,
   }).then(function(res) {
      sessionStorage.setItem("flight", JSON.stringify(res.data));
      $scope.delay = false;
      $location.path("/option");
  });
}

提交表单angularjs时的微调器

4 个答案: