Question

这是一个相当简化的例子，但我想代表这个问题。请注意，我对Angular的了解尤其有限。

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

例如，假设StringA为"{"A": 1}"，然后启用编辑模式，然后格式化该字符串并将其分配给StringB，以使其正确显示在文本区域中。因此，我将其修改为{"A": 2}并提交给后端。现在，我通过REST API修改了StringA几次，并检索到前端以非编辑模式显示它。现在StringA的值为{"A": 5}，并且启用了编辑模式。即使在{"A": 2}函数中看到，Textarea仍会显示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, '  ');
};

Answer 1

似乎您的代码中有问题... 在您的js代码中，您使用的是stringA，与html StringA一样。使用适当的编码标准来避免此类问题

而且您不应该在div上使用ng-model

即使从控制器更新后，Textarea ng模型仍保留最后一个值

1 个答案: