如何使用 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)">