AngularJSスタイルは、私はちょうど角度で開始している、と私はこれで問題に直面しています

Question

が動作していない、

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

を動作するようです、これは私の角度である私は、関連する回答のほとんどを踏襲したが、彼らはdoes'ntコード

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

     }); 
     } 

     }); 

私はローダーの可視性を変更しようとしていますが、それは動作していない、私はフォームが送信されたときに、ローダを開始したいwhy.I知っていると私は返事をもらうときにそれを削除しないでくださいサーバーから。 ヘルプがありますか？

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