Angularjs Does Not Send Hidden Field Value

How to send hidden field values with angularjs using ng-value

Sorry to be answering my own question so early, but I solved this. But basically I had to add all of those definitions:

$scope.formData.e_time = sluiceStuff.e_time;  
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;

into the submit() function in my scope. I guess this makes sense, because it needs to know what those are, but I though having them in the ng-value field would save them there so that they could be accessed in the post request.

edit: ah so furthermore: ,it seems like I didn't need any of those hidden fields at all. adding to the formData object upon submit is enough to add them to the post request.

Hidden form field not working in Angular Js

It seems that you are missing the ng-model tags on your hidden imports. Because of that angular does not know how or where to bind the hidden input values to the $scope. Adding those tags to all of the hidden inputs should fix your issue of them not being found on the $scope.

Angularjs ng-model not binding to hidden input

First, ng-model doesn't work on hidden inputs, so you can just use ngValue to achieve what you want.

The problem is that you're using the incorrect syntax on ngValue directive.

Here's an example:

angular.module('app', [])  .controller('mainCtrl', function($scope) {      });

<!DOCTYPE html><html ng-app="app">
<head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script></head>
<body ng-controller="mainCtrl">  <input type="text" ng-model="value" placeholder="Type value to hidden input">  <input type="hidden" ng-value="value">  <hr>  Value of input hidden (or check it in console):  <pre ng-bind="value"></pre></body>
</html>

Sending values of hidden fields with AngularJS using ng-value

try this

  <input type="hidden" ng-model="c.cid"  ng-value="c.cid = p.id">

var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){    $scope.pid = 4;  $scope.addComment = function(){    alert($scope.cid);    }    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="MyCtrl">     <input type="hidden" ng-model="cid"  ng-value="cid = pid">  <button type="submit" name="button" ng-click="addComment()">ENVIAR</button>  </div>

AngularJS does not send hidden field value

You cannot use double binding with hidden field.
The solution is to use brackets :

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

EDIT : See this thread on github : https://github.com/angular/angular.js/pull/2574

EDIT:

Since Angular 1.2, you can use 'ng-value' directive to bind an expression to the value attribute of input. This directive should be used with input radio or checkbox but works well with hidden input.

Here is the solution using ng-value:

<input type="hidden" name="someData" ng-value="data" />

Here is a fiddle using ng-value with an hidden input: http://jsfiddle.net/6SD9N

Sending POST with hidden input value does't work in AngularJs

It may be that the only reason your code is not working is that $scope.keywords is a simple variable (with a text value) instead of an Object, which is required - see http://docs.angularjs.org/api/ng.$http#Usage

As angularJS works with variables within its own scope - its models, a form becomes just a way to interact with those models, wich can be sent via whatever method you want.

You can have a hidden field, yes, but in angularJS it isn't even necessary. You only need that information to be defined in the controller itself - randomly generated for each instance, or received from some other source.. Or you can define it yourself, upon the loading of the controller, for instance.

So (and only for sake of clarity) if you define a formData variable within your formCtrl:

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 wanted to set the unique id on the html itself, ~~you could add an input type="hidden" and set it's ng-model attribute to formData.id, and whichever value you set it to, the model would have it binded.~~ using a hidden input won't work, as the value attribute doesn't update the angularJS Model assigned via ng-model. Use ng-init instead, to set up the value:

HTML with 2 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 accomplishes nothing - the ng-init attribute does everything you need.

Unable to get the hidden field Value via ng-model

simple trick...Instead of calling javascript for setting the Id, set that via a controller using ng-click.

$scope.storeId=function(id){
                $scope.id=id;
}

And Called it via

<Button type="button" ng-click="storeId(form_data.id)" data-toggle="modal" data-target="#modal_content">
<span class="glyphicon glyphicon-pencil">