Question

通过重做我已构建的应用程序来学习Angular。我试图将一些文本框中的数据发布到我的生产API。当我单击提交按钮时，我得不到任何回复。没有闪烁，没有错误信息，没有。如果我没有正确连接我的Angular，我很好奇。如果有人能帮我解决这个问题，我会非常感激。

MainController.js

(function () {
var app = angular.module("app", [])

app.controller('MainController', function($scope, $http) {
    var onUpdatesComplete = function (response) {
        $scope.updates = response.data;
    };
    $http.get("productionApiAddress")
        .then(onUpdatesComplete);

    $scope.demoInquiry = function(){
        var data = $.param({
            json: JSON.stringify({
                firstName : $scope.firstName,
                lastName : $scope.lastName,
                companyName : $scope.companyName,
                email : $scope.email,
                phone : $scope.phone
            })
        });
        $http.post("http://productionApiAddress", data).success(function() {
            $.('#demoSuccessResult').removeClass('hidden');
        })
    };
});
}());

的index.html

<html ng-app="app">
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/MainController.js"></script>
...
<body ng-controller="MainController">
...
<div class="row">
            <div class="col-lg-6 col-xs-12">
                <div class="form-group">
                    <label>First Name*</label>
                    <input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12">
                <div class="form-group">
                    <label>Last Name*</label>
                    <input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-xs-12">
                <div class="form-group">
                    <label>Company Name*</label>
                    <input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12">
                <div class="form-group">
                    <label>Your Work Email*</label>
                    <input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3 col-xs-12">
                <div class="form-group">
                    <label>Office Phone Number*</label>
                    <input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3 col-xs-12">
                <div class="form-group">
                    <input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control"
                           style="background-color: #053A54; color: #ffffff;"
                           value="Submit For Trial"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-lg-offset-3 col-xs-12">
                <p>* - required</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-lg-offset-3 col-xs-12 hidden">
                <span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
            </div>
        </div>

Answer 1

请参阅下文。你不必使用jquery显示/隐藏潜水元素ng-show hide会为你做同样的工作。

＆＃13;

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope, $http) {

  $scope.demoInquiry = function() {
    var data = {
      firstName: $scope.firstName,
      lastName: $scope.lastName,
      companyName: $scope.companyName,
      email: $scope.email,
      phone: $scope.phone

    };
    console.log(data);
    $http.post("http://productionApiAddress", data).success(function() {
      $scope.postSucess = true
    }).error(function() {
      $scope.postError = true;
    });
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <div class="row">
      <div class="col-lg-6 col-xs-12">
        <div class="form-group">
          <label>First Name*</label>
          <input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
        </div>
      </div>
      <div class="col-lg-6 col-xs-12">
        <div class="form-group">
          <label>Last Name*</label>
          <input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-xs-12">
        <div class="form-group">
          <label>Company Name*</label>
          <input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
        </div>
      </div>
      <div class="col-lg-6 col-xs-12">
        <div class="form-group">
          <label>Your Work Email*</label>
          <input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-3 col-xs-12">
        <div class="form-group">
          <label>Office Phone Number*</label>
          <input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-3 col-xs-12">
        <div class="form-group">
          <input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9 col-lg-offset-3 col-xs-12">
        <p>* - required</p>
      </div>
    </div>
    <div class="row" ng-show="postSucess">
      <div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
        <span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
      </div>
    </div>
    <div class="row" ng-show="postError">
      <div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
        <span id="demoErrorResult" style="color: red;">Wooowa can't post </span>
      </div>
    </div>

  </div>
</body>

＆＃13;

无法使用Angularjs将数据发布到web api

1 个答案: