AngularJS와 스타일 난 그냥 각도로 시작

Question

작동하지 않습니다, 나는이 함께 문제를 직면하고, 내가 관련 답변의 대부분을 따라하지만 그들은 does'nt는

<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> 

을 작동하는 것 같다 그리고 이것은 내 각이다 코드

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){ 

     }); 
     } 

     }); 

내가 로더의 가시성을 변경하려고하지만 그것은 작동하지 않습니다, 나는 양식이 제출 될 때 로더를 시작하려는 이유는 모르겠지만 알고 내가 응답을받을 때를 제거하지 마십시오 서버에서. 도움이 필요하십니까 ??

Answer 1

또한 로더

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

하고 내부 제출 양식 기능

 $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; 
     }); 
    } 

의 가시성을 설정하는 NG-쇼를 사용할 수 있지만이 목적을 위해 NG-스타일을 사용하려는 경우 시도해 볼 수 있습니다.

$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' }; 
     }); 
    }