angularjs removing special characters in dynamic form elements

Question

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 ,

this is what I am working on it http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview

sorry for my poor english,,,

Answer 1

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

Answer 2

What Chris Story says is correct. You are trying to model the text value of the <textarea> to an array of objects, inputs

If you are just trying to display the results like it seems, a <textarea> is not the way to go. 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. 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 .

Change the inputs to utilize the 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 rows="22" cols="55" ng-model="listString"></textarea>

I have forked your Plunkr here

The behavior does not make much sense from a UX perspective, but this seems to match your requirement. An option that might make sense is to add disabled="true" to the <textarea> so it can not be edited.