使用angularjs将表单数据发布到服务器

Question

我有这个html仪表板，我想通过AngularJS中的api调用将此表单数据提交给服务器。我知道创建一个模块，控制器并将控制器链接到$ http以将数据发布到服务器。但是在下面的代码中，我发现它与我学到的正常angularJS编码不同寻常。有人可以建议我如何在控制器中定义提交按钮的submitRequest（）函数并将其链接到$ http ..

 <form ng-controller="RequestController" method="post">

<div class="container">

  <div class="row" ng-submit>
    <p class="text-info">Please create request...</p>
    <!-- Left -->
    <div class="col-lg-2">

      <div class="panel panel-primary">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Request</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- process type -->
          <div class="groups list list-inset">
            <div class="form-group">
              <label for="generic_process_id">Select process typ:</label>
              <select class="form-control" id="generic_process_id" ng-model="request.approvalObject.generic_process_id" >

              <option value="1"  ng-show="true" >Simple Process</option>

              </select>
            </div>
          </div>

        </div>

      </div>
      <div class="panel panel-warning">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Priority</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- priority type -->
          <div class="groups list list-inset">
            <label>Select priority:</label><br>
            <div class="btn-group" ng-init="request.approvalObject.priority='1'">
              <label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
              <label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
            </div>
          </div>
          <hr>
        </div>
      </div>

    </div>
    <!-- Center -->
    <div class="col-lg-6">
      <!-- Description part-->
      <div class="panel panel-success">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Description</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <div class="form-group">
            <label for="short_text">Subject:</label>
            <textarea placeholder="Subject name" ng-model="request.approvalObject.short_text" class="form-control" rows="1" id="short_text"></textarea>
          </div>

          <div class="form-group">
            <label for="long_text">Description:</label>
            <textarea placeholder="Explanatory description" ng-model="request.approvalObject.long_text" class="form-control" rows="10" id="long_text"></textarea>
          </div>
        </div>
        <pre>{{request.approvalObject|json}}</pre>
        <pre>{{request.form|json}}</pre>
      </div>
    </div>
    <!-- Right -->
    <div class="col-lg-4">
      <!-- value part-->
      <div class="panel panel-info">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Value</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <div class="groups list list-inset">
            <label class="item item-input">
              <input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
            </label>
          </div>
          <div class="groups list list-inset">
            <label class="item item-input">
              <select class="form-control" name="value_currency" ng-model="request.approvalObject.value_currency">

                </select>
            <!--  <input type="text" placeholder="Value currency" name="value_currency" ng-model="request.approvalObject.value_currency">-->
            </label>
          </div>
          <br>
          <div ng-show="secondApprover"  class="groups list list-inset">
            <label class="item item-input">
              <input type="text" placeholder="Value gate" name="value_gate" ng-model="request.approvalObject.value_gate"><b class="text-primary">  {{request.approvalObject.value_currency}}</b>
            </label>
          </div>

        </div>
      </div>

      <div class="panel panel-info">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Approver</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <div class="groups list list-insert">
            <label class="item item-input">
              <input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name">
            </label>
          </div>
          <!-- show second approver if process type != 1 -->
          <div ng-show="secondApprover"  class="groups list list-insert">
            <label class="item item-input">
              <input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" >
            </label>
          </div>
        </div>
      </div>

      <div class="panel panel-info">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Date</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- expiration date part -->
          <label>Select expiration date:</label>
          <pre>Selected Local time : <em>{{request.approvalObject.date_of_expiration | date: 'MM-dd-yyyy hh:mm' }}</em></pre>
          <pre>Selected UTC time   : <em>{{request.approvalObject.date_of_expiration|  date: 'MM-dd-yyyy hh:mm' : 'UTC' }}</em></pre>
          <div uib-datepicker ng-model="request.approvalObject.date_of_expiration" class="well well-sm" datepicker-options="options"></div>
          <div uib-timepicker ng-model="request.approvalObject.date_of_expiration" class="well well-sm" timepicker-options="options"></div>

        </div>
      </div>

  </div>
</div>

<button class="btn btn-primary center-block col-xs-3" ng-click='submitRequest()' style='margin: 450px;margin-top:10px; margin-bottom:100px'>Submit Request</button>
</form>

Controller.JS

 'use strict';

export default class RequestController {


  approvalObject = {};


  form = {};

  secondApprover = false;





$onInit() {
  this.approvalObject.generic_process_id=1;
  this.approvalObject.value_currency="EUR";
  this.approvalObject.priority=1;


  this.form.type=1;
}

  /*@ngInject*/
  constructor($http, $scope, socket) {
    this.$http = $http;
    console.log("testentry");
  }


  startApproval(approvalObject) {
    console.log("test");
    // creator_email and name from backend
    approvalObject.generic_process_id=1;
    approvalObject.creator_email= "test1@example.com";
    approvalObject.creator_name= "test1";
    approvalObject.approver1_email= approvalObject.approver1_name+"@example.com";
    approvalObject.approver2_email= approvalObject.approver2_name+"@example.com";

    // wip from backend
    approvalObject.approval_process_status= "wip";
    approvalObject.priority= "super high";
    //date_of_creation: '',  -->> filled by database
    approvalObject.date_of_expiration = undefined;
    approvalObject.sending_tool= "Web-App";
    approvalObject.submitRequest=true;


    this.$http.post('/api/approvals', approvalObject);
  }

}