AngularJS 将 json 绑定到表单输入

Posted 2023-03-05

【中文标题】AngularJS 将 json 绑定到表单输入

【英文标题】：AngularJS binding json to a form input

【发布时间】：2013-02-12 04:00:40

【问题描述】：

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

<div id="json_routeroute.id" ng-bind="items.routeroute.id | json"></div>

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

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

这会给我一个错误：

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

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

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

【问题讨论】：

请注意我的 使用的是 django/jinja 模板代码，因此假设 items.routeroute.id 将呈现为 items.route1 等。

【参考方案1】：

“为了能够将模型渲染到视图中，模型必须能够在范围内被引用。”（来源：Angular Guide）。

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

使用 ng-bind 可以正常工作，因为 ng-bind 与 ng-model 不同。 ngBind simply 获取您的表达式并在当前范围内对其进行评估，然后用结果替换宿主元素的文本。正如 Guide 告诉我们的那样，ng-model 的值必须是一个可分配的角度表达式以数据绑定到。

要让您的隐藏输入包含您的“items.route2”模型的 json 字符串表示，您可以在控制器中设置一个 $watch 表达式，该表达式将在模型的 json 字符串发生变化时“准备”它。见plnkr example。

【讨论】：

谢谢，这正是我所需要的，但是当数据发生变化时，我的 json 并没有更新，尽管 $watch embed.plnkr.co/yK654zxxXH0FwP9LVsyT/preview 我错过了什么？

我会提供帮助，但请首先通过放弃与实际问题无关的所有内容来简化您的 plnkr。尝试分析如此沉重的笨蛋非常耗时。

embed.plnkr.co/yK654zxxXH0FwP9LVsyT/preview 修剪了脂肪，在 index.html 的底部是与手表相关的所有代码，从预览中可以看到，json 在页面底部返回

修剪得更多，让它更容易一些。

所以我最终没有使用ng-init我从手表中删除了json过滤器，然后分配了value="[[jsonRep.route1]]"示例linkplnkr

【参考方案2】：

尝试使用 ng-init：

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

另见https://***.com/a/12657601/215945。