AngularJS将json绑定到表单输入

AngularJS将json绑定到表单输入,angularjs,pyramid,Angularjs,Pyramid,我可以使用以下代码轻松地将数据绑定到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"

我可以使用以下代码轻松地将数据绑定到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">)
错误:不可分配的模型表达式:items.route2 | json()
所以很明显,在使用ng模型时,我不能使用| json。角度文档仍然有点稀疏,我似乎无法找到如何正确分配它,即使我可以?谢谢:)

我需要将此json数据加载到我的金字塔应用程序中,并将其分配到一个隐藏的表单字段中,这似乎是最好的方法,还是我应该以另一种方式执行此操作?

尝试使用ng init:

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

另请参见。

“为了能够将模型渲染到视图中,模型必须能够从范围中引用。”(src:)

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

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


要使隐藏输入包含“items.route2”模型的json字符串表示形式,可以在控制器中设置$watch表达式,该表达式将在模型的json字符串发生更改时“准备”该字符串。请参阅。

请注意我的{{}are django/jinja模板代码的使用,因此假设items.route{{route.id}将呈现为items.route1等。谢谢,这正是我所需要的,但是我的json在数据更改时不会更新,尽管$watch我错过了什么?我会提供帮助,但是,请首先通过抛弃与实际问题无关的一切来简化plnkr。试图分析如此沉重的劫掠是非常耗时的。修剪了index.html底部的fat,这是与手表相关的所有代码,正如您在预览中看到的,json在页面底部返回,修剪得更加简单。因此我没有使用ng init,最后我从手表中删除了json过滤器,然后分配了value=“[jsonRep.route1]”示例plnkr