Angularjs ng-model not binding to hidden input

Question

I'm attempting to pass form information through hidden input like so:

<input type="hidden" required ng-model="formHolder.template[position].itemKey[itr]" ng-value="[[ formItem ]]" />

formItem can be any string. Errors occur with strings that contain spaces.

Error angular.js:13708 Error: [$parse:syntax] Syntax Error: Token 'Line' is an unexpected token at column 9 of the expression [Subject Line] starting at [Line].

Is ng-value expecting a certain type?

Here you can find explanation of this http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value — Nico Vignola, Jul 15 '16 at 13:44

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

I think this might be what you're looking for: AngularJS does not send hidden field value

Specifically, you can bind the data from angular to the normal HTML value tag as such:

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

edited May 23 '17 at 12:14

Community

1
1

answered Jul 15 '16 at 13:44

nmg49

1,356
1
11
28

score 2 · Accepted Answer · answered Jul 15 '16 at 16:05

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>

Angularjs ng-model not binding to hidden input

2 Answers2