AngularJS样式不起作用

时间:2017-12-24 06:55:01

标签: javascript angularjs

我刚开始使用棱角分明,我正面临着这个问题,我遵循了大部分相关的答案,但他们似乎没有工作

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

       });
      }

      });

我正在尝试更改加载程序的可见性,但它无法正常工作,我不知道为什么。我想在提交表单时启动加载程序,并在收到服务器的回复时将其删除。 任何帮助?

1 个答案:

答案 0 :(得分:0)

您还可以使用ng-show设置装载程序的可见性

arr.reject(&:blank?)

并在提交表单函数中

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

但是如果您想为此目的使用ng-style,可以尝试以下

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