AngularJS将json绑定到表单输入

Question

我可以使用以下代码轻松地将数据绑定到div或pre标记：

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

但是，我想尝试将此数据绑定到隐藏表单输入，我尝试了：

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

这将返回以下错误：

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

所以很明显，在使用ng模型时，我不能使用| json。角度文档仍然有点稀疏，我似乎无法找到如何正确分配它，即使我可以？谢谢：）

我需要将这个json数据加载到我的金字塔应用程序中，并将其分配到一个隐藏的表单字段中，这似乎是最好的方法，或者我应该以另一种方式来做？

Answer 1

尝试使用ng init：

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

另见https://stackoverflow.com/a/12657601/215945.

Answer 2

"为了能够将模型呈现到视图中，模型必须能够从范围中引用。"（src： Angular Guide）。

Angular需要能够将ngModel表达式中的值引用到控制器中的$scope变量。

使用ng bind时，它可以工作，因为ng bind与ng模型不同。ngBind只需获取表达式并在当前范围内对其求值，然后用结果替换宿主元素的文本。正如指南所告诉我们的，ng模型的值必须是数据绑定到的可分配角度表达式。

使隐藏输入包含“项”的json字符串表示形式。route2’模型您可以在控制器中设置$watch表达式，该表达式将在模型发生更改时“准备”模型的json字符串。参见plnkr示例。