Question

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

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

抱歉我的英语不好,,,

Answer 1

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

Answer 2

Chris Story说的是正确的。您正尝试将<textarea>的 text 值建模为对象数组inputs

如果你只是试图显示结果，那么<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 + "; ";
  }
}

最后，在$scope.listString：

中使用此<textarea>

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

我已将您的Plunkr分叉here

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

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

2 个答案: