angularjs - 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-model 时的 json。角度文档仍然有点稀疏，我似乎无法找到如何正确分配它，即使我可以？谢谢：）

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

score 0 · Accepted Answer

尝试使用 ng-init：

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

score 0 · Accepted Answer

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

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

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

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

2 回答 2