AngularJS Stil nicht funktioniert

Question

Ich habe mit Winkel gerade erst begonnen, und ich bin vor Problem mit diesem, ich folgte die meisten der im Zusammenhang Antworten, aber sie does'nt scheint

<section id="contactForm" ng-app="duty"> 
    <form method="post" ng-controller="submitagain" ng-submit="submitForm()" > 
    <h2 class="ft-heading text-upper">DUTY SLIP</h2> 


    <label> <b>R.A. No.</b> <span class="required small"></span></label> 
    <input type="text" class="form-control" required ng-model="form.rnum" name="name" value="" /> 

      <div class="col-md-3" > 
       <div ng-style="alpha" class="loader"></div> //problem here 
      </div> 
      </li> 
     </ul> 
     </fieldset> 
    </form> 
    </section> 

zu arbeiten, und das ist mein Winkel

Code

var app=angular.module("duty",[]); 
    app.controller('submitagain', function ($scope,$http){ 
     var formData = { 
      name: "default", 
      email: "default", 
      textareacontent: "default", 
      gender: "default", 
      member: false 
     }; 
     $scope.alpha={ 
     "display":"none" } 

    $scope.submitForm = function() { 

$http({ 

       url: "dutyenquiry.php", 
       data: $scope.form, 
       method: 'POST', 
       dataType:'html', 
       headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} 

      }).then(function (response){ 

      $scope.myObj={ 
       "display" : "none", 
      } 
      //$('.form-control').val(""); 
    var output=JSON.stringify(response); 
     console.log(response); 


      },function (error){ 

     }); 
     } 

     }); 

ich versuche, die Sichtbarkeit des Laders zu ändern, aber es funktioniert nicht, ich weiß nicht, why.I den loader gestartet werden soll, wenn das Formular abgeschickt wird und es entfernen, wenn ich eine Antwort erhalten vom Server. Irgendwelche Hilfe ??

Answer 1

Sie können auch ng-Show verwenden Sichtbarkeit Ihrer loader

<div ng-show="displayLoader" class="loader"></div> 

und in Ihrem Formular senden Funktion

 $scope.submitForm = function() { 
     $scope.displayLoader = true; 
     $http({ 
      url: "dutyenquiry.php", 
      data: $scope.form, 
      method: 'POST', 
      dataType: 'html', 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } 
     }).then(function (response) { 
      $scope.displayLoader = false; 
      var output = JSON.stringify(response); 
      console.log(response); 
     }, function (error) { 
      $scope.displayLoader = false; 
     }); 
    } 

einstellen, aber wenn Sie zu diesem Zweck ng-Stil verwenden Sie kann folgendes versuchen

$scope.submitForm = function() { 
     $scope.alpha = { 'display': 'inline' }; //default value of display 
     $http({ 
      url: "dutyenquiry.php", 
      data: $scope.form, 
      method: 'POST', 
      dataType: 'html', 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } 
     }).then(function (response) { 
      $scope.alpha = { 'display': 'none' }; 
      var output = JSON.stringify(response); 
      console.log(response); 
     }, function (error) { 
      $scope.alpha = { 'display': 'none' }; 
     }); 
    }