Hidden fields in AngularJs

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.


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


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

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.

Tags:

Javascript

Angularjs

Recent Posts