angularjs删除动态表单元素中的特殊字符

Question

我正在尝试使用angularjs动态表单元素，但是当我在输入中键入内容时，会出现很多特殊字符[]"":和textarea中的field, value .etc，我只想在textarea中查看我在输入中写的内容，

这就是我正在处理的内容http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview

对不起，我英语不好，

Answer 1

问题是您正在渲染{{inputs}}并且输入是一个数组。

Answer 2

克里斯·斯托里（Chris Story）说的是正确的。 您正在尝试将<textarea>的文本值建模为对象数组， inputs

如果您只是<textarea>看起来那样显示结果，则<textarea>并非<textarea>之路。 您可以将它们显示在一个简单的列表中，如下所示：

<ul>
    <li ng-repeat="input in inputs">{{input.field}} = {{input.value}}</li>
</ul>

编辑

要在<textarea>显示它，您需要将列表存储为字符串以使用。 每当使用ng-change对输入值进行更改时，可以通过将每个项目附加到单个字符串中来完成此操作。

更改输入以利用ng-change：

<div ng-repeat="input in inputs">
    <input type="text" ng-model="input.field" ng-change="inputChanged()" />
    <input type="text" ng-model="input.value" ng-change="inputChanged()" />
    <button ng-click="removeInput($index); inputChanged()">Remove</button>
</div>

并创建用于维护字符串的函数：

$scope.inputChanged = function() {
  $scope.listString = "";
  for(var i = 0; i < $scope.inputs.length; i++) {
    var field = $scope.inputs[i].field;
    var value = $scope.inputs[i].value;
    $scope.listString += field + " = " + value + "; ";
  }
}

最后，在<textarea>使用此$scope.listString ：

<textarea rows="22" cols="55" ng-model="listString"></textarea>

我在这里分叉了您的Plunkr

从UX的角度来看，此行为没有多大意义，但这似乎符合您的要求。 可能有意义的选项是将< disabled="true"添加到<textarea>以便无法对其进行编辑。