Perhaps the only reason your code doesn't work is because $ scope.keywords is a simple variable (with a text value) instead of Object, which is required - see http://docs.angularjs.org/api/ ng. $ http # Usage
Because angularJS works with variables within its own realm - its model, the form becomes just a way to interact with these models, which can be submitted in any way you want.
Yes, you can have a hidden field, but in angularJS this is not even necessary. You only need this information, which must be defined in the controller itself - randomly generated for each instance or obtained from some other source. Or you can define it yourself, for example, when loading the controller.
So (and just for clarity), if you define the formData variable in your form Ctrl:
Your HTML:
<div ng-app> <div ng-controller="SearchCtrl"> <form class="well form-search"> <input type="text" ng-model="formData.title"> <input type="textarea" ng-model="formData.body"> <button ng-click="sendData()">Send!</button> </form> <pre ng-model="result"> {{result}} </pre> </div> </div>
And your controller:
function SearchCtrl($scope, $http) { $scope.url = 'qa/vote_up'; // The url of our search // there is a formData object for each instance of // SearchCtrl, with an id defined randomly // Code from http://stackoverflow.com/a/1349426/1794563 function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 5; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } $scope.formData = { title: "", text: "" }; $scope.formData.id = makeid(); // The function that will be executed on button click (ng-click="sendData()") $scope.sendData = function() { // Create the http post request // the data holds the keywords // The request is a JSON request. $http.post($scope.url, { "data" : $scope.formData}). success(function(data, status) { $scope.status = status; $scope.data = data; $scope.result = data; // Show result from server in our <pre></pre> element }) . error(function(data, status) { $scope.data = data || "Request failed"; $scope.status = status; }); }; }
Also: if you want to set a unique identifier in html itself , you can add the input type = "hidden" and set the ng-model attribute for it in formData.id and what value you set for it, the model would bind it. using hidden input will not work because the value attribute does not update the angularJS model assigned using the ng model. Instead, use ng-init to set the value:
HTML with two forms:
<div ng-controller="SearchCtrl" ng-init="formData.id='FORM1'"> <form class="well form-search"> <input type="text" ng-model="formData.title"> <input type="textarea" ng-model="formData.body"> <button ng-click="sendData()">Send!</button> </form> </div> <div ng-controller="SearchCtrl" ng-init="formData.id='FORM2'"> <form class="well form-search"> <input type="text" ng-model="formData.title"> <input type="textarea" ng-model="formData.body"> <button ng-click="sendData()">Send!</button> </form> </div>
You can add a hidden field, but it does nothing - the ng-init attribute does everything you need.