2

I can easily bind data to a div or pre tag with the code:

<div id="json_route{{route.id}}" ng-bind="items.route{{route.id}} | json"></div>

However, I want to try and bind this data to a hidden form input, I tried:

<input type="hidden" name="json_route{{ route.id }}" 
ng-model="items.route{{route.id}} | json" />

Which returns me an error of:

Error: Non-assignable model expression: items.route2 | json (<input type="hidden" name="json_route2" ng-model="items.route2 | json">)

So obviously I cannot use | json when using ng-model. The angular docs are still a bit sparse and I can't seem to find how to assign this correctly, even if I can? Thanks :)

I need to get this json data loaded into my pyramid application, and assigning it into a hidden form field seemed the best way todo it, or should I be doing this in a different way?

Cro0ksey
  • 25
  • 1
  • 5
  • Please note the use of my {{}} are django/jinja template code, so assume items.route{{route.id}} would render as items.route1 etc. – Cro0ksey Feb 26 '13 at 16:25

2 Answers2

0

Try using ng-init:

<input type="hidden" name="..." ng-model="items.route{{route.id}}"
 ng-init="items.route{{route.id}} = data_from_server_here">

See also https://stackoverflow.com/a/12657601/215945.

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
0

"To be able to render the model into the view, the model has to be able to be referenced from the scope." (src: Angular Guide).

Angular needs to be able to reference the value in your ngModel expression to a $scope variable in your controller.

With ng-bind it worked, because ng-bind is not the same as ng-model. ngBind simply takes your expression and evaluates it inside the current scope and than replaces the text of the host element with the result. As Guide tells us, the value of ng-model must be an assignable angular expression to data-bind to.

To have your hidden input contain the json string representation of your 'items.route2' model you could setup a $watch expression in your controller which would "prepare" the json string of your model whenever it changes. See plnkr example.

Stewie
  • 60,366
  • 20
  • 146
  • 113
  • Thanks this is just what I needed, however my json isnt updating when the data changes, despite the $watch http://embed.plnkr.co/yK654zxxXH0FwP9LVsyT/preview what have I missed? – Cro0ksey Feb 27 '13 at 11:55
  • I'd help, but please first simplify your plnkr by ditching everything that's not related to the actual problem. It's very time-consuming trying to analyze such a heavy plunker. – Stewie Feb 27 '13 at 12:14
  • http://embed.plnkr.co/yK654zxxXH0FwP9LVsyT/preview trimmed the fat, at the bottom of the index.html is all of the code relating to the watch and as you can see from the preview the json is returned at the bottom of the page – Cro0ksey Feb 27 '13 at 12:29
  • Trimmed even more to make it slightly easier. – Cro0ksey Feb 27 '13 at 13:28
  • So I didnt use ng-init in the end I removed the json filter from the watch, and then assigned value="[[jsonRep.route1]]" example [link](http://embed.plnkr.co/prLP5QjqJSIMVadiuLH9/preview) plnkr – Cro0ksey Feb 28 '13 at 13:32