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">)

显然，我不能使用| json使用ng-model时。角度文档仍然有点稀疏，我似乎无法找到如何正确分配，即使我可以？谢谢:)）

我需要将这个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-model不同。 ngBind 简单获取表达式并在当前作用域内对其求值，然后用结果替换host元素的文本。正如Guide告诉我们的那样，ng-model的值必须是可分配的角度表达式才能数据绑定到。

要让您的隐藏输入包含“items.route2”模型的json字符串表示形式，您可以在控制器中设置$ watch表达式，以便在模型更改时“准备”模型的json字符串。请参阅plnkr example。