Question

我正在学习角度js。我只想清除表单字段并在http then（）中显示成功div。

this.formSubmitted = false;
this.successs = false;

myResumeApp.controller("FormController",['$http', function($http){
    this.formSubmit = function(contactForm) {
    this.formSubmitted = true;
    if(contactForm.$valid)
    {
        $http({
              method: 'post',
              url: 'http://jerrythimothy.is-great.net/mailme.php',
              data: $.param({
                    fname : this.fname,
                    email : this.email,
                    content : this.content
                }),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(function successCallback(response) {
                this.successs = true;
                // this callback will be called asynchronously
                // when the response is available
              }, function errorCallback(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
              });// JavaScript Document
        }
    };
}]);



<div class="container" ng-controller="FormController as formCtrl">
  <h2>Contact me</h2>
  <div ng-show="formCtrl.successs" class="alert alert-success fade in"          style="padding-top:5px;padding-bottom:5px;margin-top:5px;margin-bottom:5px;">Thank you for contacting me. I will be in touch with you shortly.</div>
   <form role="form" name="contactForm" novalidate ng-submit="formCtrl.formSubmit(contactForm)">

请告诉我我的代码或其他任何建议是否有任何问题。控件进入then（）块。但我需要知道如何访问successs元素并清除表单字段。

谢谢。

Answer 1

你应该能够在successCallback中处理它。

... .then(function successCallback(response) {
            this.successs = true;
            contactForm.reset()
          }, ...

另外，我不认为this内的successCallback与您初始化this.formSubmitted = false;...

的行相同

Answer 2

使用this（并将其添加到依赖项），而不是$scope。知道你的successs属性被分配给不同的对象（窗口和回调函数）。

控制器代码：

myResumeApp.controller("FormController",[
    '$scope',
    '$http', 
    function($scope, $http){    
        $scope.successs = false;
        $scope.formSubmitted = false;
        $scope.msg = {};
        $scope.formSubmit = function(contactForm) {
            $scope.formSubmitted = true;

            if(contactForm.$valid)
            {
                $http({
                  method: 'post',
                  url: 'http://jerrythimothy.is-great.net/mailme.php',
                  data: $.param({
                        fname : $scope.msg.fname,
                        email : $scope.msg.email,
                        content : $scope.msg.content
                    }),
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function successCallback(response) {
                    $scope.successs = true;
                    $scope.msg = {};
                    // this callback will be called asynchronously
                    // when the response is available
                  }, function errorCallback(response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                  });// JavaScript Document
            }
        };  
    }
]);

HTML code：

<div class="container" ng-controller="FormController as formCtrl">
<h2>Contact me</h2>

<div ng-show="successs" 
class="alert alert-success fade in"          
style="padding-top:5px;padding-bottom:5px;margin-top:5px;margin-bottom:5px;">
    Thank you for contacting me. I will be in touch with you shortly.
</div>
<form role="form" name="contactForm" novalidate ng-submit="formSubmit(contactForm)">
    <input type="text" name="name" ng-model="msg.fname" />
    <input type="text" name="email" ng-model="msg.email" />
    <input type="text" name="content" ng-model="msg.content" />
    <input type="submit" value="submit" />
</form>

从Angular Promise访问表单元素和div

2 个答案: