16

How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.

I updated the default angular example to display the situation - the todo text is in hidden field.

http://jsfiddle.net/tomasfejfar/yFrze/

2

7 Answers 7

13

If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:

<input type="hidden" name="value" ng-init="model.value=1" value="1">

this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS

5
  • 2
    Use: <input type="hidden" name="value" ng-model="model.value" ng-init="model.value =1 " value="{{model.value}}">. This way changes to model.value will be updated in the input value.
    – GFoley83
    Jul 17, 2013 at 1:29
  • 1
    there's no need to set a hidden value to the model value, since it's not something the user will change. the model value can be kept in the scope without altering the DOM
    – pocesar
    Jul 17, 2013 at 17:41
  • 1
    What if you want access to that model value (or some interpolated value) in a postback? It would be pretty handy then. I'm just highlight another useful use case for hidden fields.
    – GFoley83
    Jul 17, 2013 at 21:28
  • then you wouldn't need a DOM node with a init hack, just a directive :)
    – pocesar
    Jul 18, 2013 at 2:00
  • ng-init="model.value=val" in combination with ng-if="val" does the trick for me.
    – n0mad
    Aug 18, 2015 at 15:35
8

If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:

For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:

<ul>
  <li ng-repeat="movie in movies">
    {{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
  </li>
</ul>

Then in your JS code, you can get the ID like this:

$scope.movieDetails = function (movie) {
  var movieID = movie.id;
}
0
2

In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.

http://jsfiddle.net/andytjoslin/DkMyP/2/

Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.

3
  • But that works only one time. Next time the variable is empty. Jun 25, 2012 at 14:25
  • Ah, that's because in the todo example todoText is set to a blank string in the addTodo function. Jun 25, 2012 at 20:53
  • obviously! oh, crap! :D Thanks! :D Jun 26, 2012 at 12:02
2

You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"

<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
  $scope.processForm = function() {alert("processForm() called.");
    $scope.formData.bar = "";
    try {$scope.formData.bar = document.getElementById("form").name;} 
    catch(e) {alert(e.message);}
    alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
  };
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>

This allows You to use ONE Controller for ALL forms and send
them to ONE server script. The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.

Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.

1

Simpler:

<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>

It works!

0

Use ng-binding="{{employee.data}}". It will work properly.

0

I have to correct (improve) myself:
You can do it more elegantly:

<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>

and then in the JavaScript controller:

$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;} 
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);

So you can have as many hidden fields as you like.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.