Question

所以我在角度js上有这个视图页面

<p>This is the about Submission Details</p>
<div class="container">

<div class="col-sm-3">
    <label>
        Name:
        <div class="input-group">
        <input id="applicant-name-home-loan" type="text" name="name_value" class="form-control" placeholder="Your Name" required>
    </div>
  </label>
 </div>

 <div class="col-sm-3">
    <label>
    Email:
    <div class="input-group">
        <input type="email" name="email_value" class="form-control" placeholder="email@example.com" required>
    </div>
  </label>
  </div>         

<div class="col-sm-3">
    <label>
    Telephone:
        <div class="input-group">
        <input type="text" name="telephone" class="form-control" placeholder="012 3456 789" required>
      </div>
    </label>
</div>

<div class="col-sm-2">
    <label>
    Nationality:
    <div class="input-group">
        <select class="form-control" name="hnationality_type">
        <option value="" default selected class="placeholder">Please Select</option>
        <option>Malaysian</option>
        <option>Singaporean</option>
        <option>Others</option>
      </select>
    </div>
  </label>
</div>

              <div class="col-sm-1">
                <label>
                  Age:
                  <div class="input-group">
                    <input type="text" name="age" class="form-control custom-age-width" placeholder="30" maxlength="2">
                  </div>
                </label>
              </div>

            <div class="row padding-top-extra">

              <div class="col-sm-3">
                <label>
                  Monthly gross income:
                  <div class="input-group">
                    <input type="text" name="monthly_income" class="form-control" placeholder="5000" required>
                  </div>
                </label>
              </div>

              <div class="col-sm-3">
                <label>
                  Other loan amount:
                  <div class="input-group">
                    <input type="text" name="other_loan_amount" class="form-control" placeholder="0">
                  </div>
                </label>
              </div>

              <div class="col-sm-2">
                <label>
                  Your location:
                  <div class="input-group">
                    <select class="form-control" name="happlicant_state" required>
                      <option>Please Select</option>
                      <option>Johor</option>
                      <option>Kedah</option>
                      <option>Kelantan</option>
                      <option>Kuala Lumpur</option>
                      <option>Melaka</option>
                      <option>Negeri Sembilan</option>
                      <option>Pahang</option>
                      <option>Penang</option>
                      <option>Perak</option>
                      <option>Perlis</option>
                      <option>Putrajaya</option>
                      <option>Sabah</option>
                      <option>Sarawak</option>
                      <option>Selangor</option>
                      <option>Terengganu</option>
                    </select>
                  </div>
                </label>
              </div>

              <div class="col-sm-2">
                <label>
                  Property status:
                  <select class="form-control" name="hcompletion_status">
                    <option>Please Select</option>
                    <option>Completed</option>
                    <option>Under Construction</option>
                  </select>  
                </label>
              </div>

              <div class="col-sm-2">
                <label>
                  Paid boooking:
                  <select class="form-control" name="his_booking_fee_paid" required>
                    <option>Please Select</option>
                    <option>Yes</option>
                    <option>No</option>
                  </select>  
                </label>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-12">
                <p>
                  <input type="checkbox" class="income-confirm-checkbox" name="income-confirm-checkbox" id="income-confirm-checkbox" required>
                  <label for="income-confirm-checkbox" class="income-confirm-checkbox-label">
                    My income is greated than RM24,000 a year. That's at least RM2000 monthly.
                  </label>
                </p>
                <p>By typing your contact information, you agree to our <a href="/terms-of-use">terms &amp; conditions</a>. We respect your <a href="/privacy-policy">privacy</a> and are committed to handle your personal information safely and responsibly.</p>

              </div>

            </div>

            <div class="row apply-form-btn-row">
              <button class="btn btn-default btn-application-submit" role="next" ng-click="submit_info('/thank_you')">Submit</button>
              <button class="btn btn-default apply-cancel-btn" role="cancel">Cancel</button>
            </div>
</div>

我在AngularJS mortgage.js

中有这个控制器页面

 angular.module('loanstreetIpadAppApp')
      .controller('Mortgage_LoanCtrl', function ($location, $scope, $http) {
        console.log('LOAD Mortgage_LoanCtrl');

 $scope.submit_info = function() {
        $http({
            method: 'POST',
            url: '/mortgage/submit',
            data: {
                name: params['name_value'],
                email:params['email_value'],
                phone_number: params['telephone'],
            }
        }).success (function(data) {
                console.log('Data stored');
                console.log(data);
        }).error(function(reason) {
                    console.log(reason);
            });
         $location.path(path);
    };

});

好的我想用我的视图页面中的值创建一个json api。我如何调用输入值以及如何使用AngularJS在我的控制器中为此创建json api。

谢谢

Answer 1

我不确定你的意思是json API。如果你想提交json数据，那么你就是这样做的。

$scope.submit_info = function() {
          console.log($scope.info)
          $http({
              method: 'POST',
              url: '/mortgage/submit',
              data: $scope.info
          }).success (function(data) {
              console.log('Data stored');
              console.log(data);
              //redirect only after you recieve response.
              //$location.path(path);
          }).error(function(reason) {
              console.log(reason);
              //redirect only after you recieve response.
              //$location.path(errorPath);
          });
      };

转到以下jsFiddle链接查看完整代码。请注意，没有后端，所以它会转到错误功能。您还需要添加验证，并且有多种方法可以执行此操作。根据我的最佳方法是创建自己的包装器输入字段，每个字段都验证自己。

将参数从View发送到API AngularJS

1 个答案: