时间戳

首页 > 解决方案 > 即使从控制器更新后，Textarea ng-model 也会保留最后一个值

html - 即使从控制器更新后，Textarea ng-model 也会保留最后一个值

问题描述

这是一个相当简化的但我猜这个问题的代表性观点。请注意，我在 Angular 方面的知识特别有限。

我有一个表单，其中包含一个<pre>显示不可编辑的 JSON 字符串 (StringA) 的块，然后是一个按钮，该按钮启用一个文本区域的视图，我可以在其中编辑 JSON 格式的字符串 (StringB) 并将其提交到后端。问题是，即使我通过其他方式（即不通过浏览器编辑器）更新 StringA 并将其检索到前端以显示它，应该绑定到 StringB 的 textarea 中的字符串ng-nmodel=StringB永远不会更新，它保持最后一个值，我最后在 textarea 中编辑。重要的是，每当我启用 de 编辑模式时，StringB 都会通过 Angular 代码更新StringB = JSON.stringify(StringA, null, ' '). 我什至将值打印到 StringA 和 StringB 的控制台，我可以看到它们具有正确的值（基本上两者都是相同的），但我在 textarea 中看到的字符串始终是我上次通过浏览器编辑的字符串。

例如，假设 StringA 是"{"A": 1}"并且我启用了编辑模式，然后我格式化该字符串并分配给 StringB，以便它正确显示在 textarea 中。所以我修改它{"A": 2}并提交到后端。现在我修改了几次 StringA（通过 REST API）并检索到前端以在非编辑模式下显示它。现在 StringA 具有价值{"A": 5}，我启用了编辑模式。Textarea 仍然会显示{"A": 2}我通过浏览器编辑的最后一个值，即使在configEdit函数中看到，我已经修改了 StringB 的值。

这里的HTML代码：

<div class="form">

    <div ng-hide="showEditor" ng-model="StringA">
        <pre>{{StringA | json}}</pre>
    </div>

    <div ng-show="showEditor">
        <textarea id="editArea" ng-model="StringB" 
        ng-show="showEditor">
        </textarea>
    </div>

    <button class="button" type="submit" 
    ng-click="configEdit()" ng-hide="showEditor"> Edit </button>

    <button class="button" type="submit" 
    ng-click="update(StringB)" ng-show="showEditor"> Submit </button>

</div>

我还将包含 JS 代码，尽管我可以想象问题来自未正确处理前端（也许我不应该使用 textarea 等）

$scope.configEdit= function() {
    $scope.showEditor= true;
    $scope.StringB= JSON.stringify($scope.StringA, null, '  ');
};

标签： htmlangularjsangular-ngmodel

解决方案

似乎您的代码中有问题...在您的 js 代码中，您正在使用stringAwhere 和 html StringA。使用适当的编码标准来避免此类问题

而且你不应该在 div 上有 ng-model

推荐阅读