Javascript 将参数从视图发送到API AngularJS

我在angular 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>

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

---

谢谢

我不知道你说的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);
          });
      };

转到以下链接查看完整代码。 请注意，没有后端，因此它将转到错误函数。 此外，您还需要添加验证，并且有多种方法可以实现。

---

根据我的说法，最好的方法是创建自己的包装器输入字段，每个字段都进行自我验证。

是的，这正是我的意思，请提交json数据，谢谢@chandings。你的答案很准确。你知道如何将json api解析到rails控制器吗？即使在添加CORS标题后，我仍然收到一个错误，我很抱歉。我不知道。

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