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

我剛剛設置表單，我需要能夠將兩個單獨的值提交給另一臺服務器上的Java後端。其中一個值是預定義值，應該來自select，另一個值來自文本input字段。如何使用AngularJS提交選項和文本輸入表單

在前端用戶將從下拉列表中選擇一個選項並在文本框中輸入文本，然後點擊提交按鈕將其發送到後端。

我遇到了麻煩，並且正在尋找一些指針。我有一些代碼描繪了我一直在嘗試做的事情。

<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>

來源

2016-08-30 TheLimeTrees

它會幫助你。您可以根據需要創建儘可能多的ajax請求。所有你需要使用角度的'$ http'服務。閱讀https://docs.angularjs.org/api/ng/service/$http – Vineet

您將需要進行多個$ 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)">

來源

2016-08-30 14:46:46 Khelmo

感謝您的回覆。所以基本上有如下的表單標籤圍繞着select和input，然後他們需要一個'saveTerm'和'saveCriteria'的id來匹配它們。該網址將我想要的數據發送到，正確的？ – TheLimeTrees

我忘了補充說，然後從Java後端獲取JSON響應。一旦請求被提交，這也應該發生。 'GET'也可能適合那裏？ – TheLimeTrees

1 - 是的。你可以有一個JavaScript對象，其中的術語和標準屬性。 $ http服務中的網址是您的後端服務網址。 2 - 如果需要，可以使用GET。我建議你閱讀有關$ http服務，promises（.success，.then ...）和你的表單的ng-model指令 – Khelmo

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

回答

相關問題