[英]angularjs removing special characters in dynamic form elements
I am trying to use angularjs dynamic form elements but when I type something in inputs, there are appearing many special characters []"":
and field, value
.etc in textarea, I just want to see in textarea what I wrote in inputs , 我正在尝试使用angularjs动态表单元素,但是当我在输入中键入内容时,会出现很多特殊字符
[]"":
和textarea中的field, value
.etc,我只想在textarea中查看我在输入中写的内容,
this is what I am working on it http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview 这就是我正在处理的内容http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview
sorry for my poor english,,, 对不起,我英语不好,
问题是您正在渲染{{inputs}}并且输入是一个数组。
What Chris Story says is correct. 克里斯·斯托里(Chris Story)说的是正确的。 You are trying to model the text value of the
<textarea>
to an array of objects, inputs
您正在尝试将
<textarea>
的文本值建模为对象数组, inputs
If you are just trying to display the results like it seems, a <textarea>
is not the way to go. 如果您只是
<textarea>
看起来那样显示结果,则<textarea>
并非<textarea>
之路。 You can display them in a simple list, like this: 您可以将它们显示在一个简单的列表中,如下所示:
<ul>
<li ng-repeat="input in inputs">{{input.field}} = {{input.value}}</li>
</ul>
EDIT
编辑
To display it in a <textarea>
, you will need to store the list as string to use. 要在
<textarea>
显示它,您需要将列表存储为字符串以使用。 This can be done by appending each item into a single string each time there is a change to an input value using ng-change
. 每当使用
ng-change
对输入值进行更改时,可以通过将每个项目附加到单个字符串中来完成此操作。
Change the inputs to utilize the 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>
And create the function that is called to maintain the string: 并创建用于维护字符串的函数:
$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 + "; ";
}
}
And finally, use this $scope.listString
in the <textarea>
: 最后,在
<textarea>
使用此$scope.listString
:
<textarea rows="22" cols="55" ng-model="listString"></textarea>
I have forked your Plunkr here 我在这里分叉了您的Plunkr
The behavior does not make much sense from a UX perspective, but this seems to match your requirement. 从UX的角度来看,此行为没有多大意义,但这似乎符合您的要求。 An option that might make sense is to add
disabled="true"
to the <textarea>
so it can not be edited. 可能有意义的选项是将<
disabled="true"
添加到<textarea>
以便无法对其进行编辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.