如何使用AngularJS提交選項和文本輸入表單

Question

我是設置表單的新手，我需要能夠向不同服務器上的Java后端提交兩個單獨的值。 值之一是預定義的值，該值應來自select ，另一個應來自文本input字段。

在前端，用戶將從下拉菜單中選擇一個選項，並在文本框中輸入文本，然后單擊“提交”按鈕將其發送到后端。

我在設置此程序時遇到了麻煩，正在尋找一些提示。 我有一些代碼描繪了我一直在嘗試做的事情。

    <div class="col-xs-3">

<label>Search Criteria:</label>
<select class="form-control" tabindex="20">
  <option value="0" disabled selected>Select your criteria</option>
  <option value="1">Project Reference</option>
  <option value="2">Service Owner</option>
  <option value="3">Service Name</option>
  <option value="4">Service Abbreviation</option>
  <option value="5">Domain Abbreviation</option>
  <option value="6">Domain Name</option>
</select>
 </div>

  <div class="col-xs-3">
  <label>Search Terms:</label>
    <form name="options" class="form-inline">
  <div class="form-group">
    <input type="text" tabindex="21" class="form-control" placeholder="Search for..." ng-model="mytext" required>
  <button type="submit" tabindex="22" style="color: #ffffff; 
  background-color: #007381;" class="btn btn-default" ng-disabled="options.$invalid"><b>Go </b><b></b><span class="glyphicon glyphicon-chevron-right"></span></button>
   </div>
</form>
  </div>

Answer 1

您將需要進行多個$ http服務調用。 您可以在像這樣的控制器中進行操作：

.controller('YourController', function($http) {
  var controller = this;
  this.saveCriteria = function(criteria) {
    $http({method: 'POST', url: '/backend_url_handle_criteria', data: criteria})
    .success(function(data) {
        //do something with data
    }
  };
  this.saveTerm = function(term) {
    $http({method: 'POST', url: '/backend_url_handle_term', data: term})
    .success(function(data) {
        //do something with data
    }
  };
      this.send = function(formdata){
          this.saveCriteria(formdata.criteria);
          this.saveTerm(formdata.term);
      };
});

在您的html中，您聲明您的表單，如下所示

<form name="yourForm" ng-controller="YourController as yourCtrl" ng-submit="yourCtrl.send(formdata)">