Javascript 在文本区域内渲染多个值，以换行符分隔

我正在以角度渲染动态形式。当属性有多个值时，我希望在textarea中呈现它们。每个值都在其自己的行上

但我不能让它工作

这就是我到目前为止所做的：

<script type="text/ng-template" id="form_field_text">
  <label for="{{field.displayName}}">{{field.displayName}}</label>
  <br />  
  <div ng-if="field.multivalue == '0'">
    <input id="{{field.displayName}}" type="text" ng-model="formValues[field.displayName]" placeholder="{{ field.theValues[0]}}" />
  </div>       
  <div ng-if="field.multivalue == '1'">
    <textarea rows="field.numberOfValues"> 
      <p ng-repeat="value in field.theValues track by $index">
      {{value}}&#10;
      </p>
    </textarea> 
  </div>
</script>

{{field.displayName}



{{value}}
；

这就是我得到的结果，我认为这是因为我正在使用每个ng重复循环渲染元素，而textarea不允许它：

在这种情况下，我可以在没有任何html元素“段落”的情况下重复ng吗？ 或者其他方法来完成这项工作？

这样做的诀窍是：

  <div ng-if="field.multivalue == '1'">
    <textarea  rows="{{field.numberOfValues}}" cols="50">
      {{field.theValues.join("&#10;");}}
    </textarea>
    <button type="button" ng-click="addValue(field)">Add value </button>
  </div>

但出于某种原因，我在第一行得到了一个缩进：

我修复了“空白”属性的缩进问题：

<textarea rows="{{field.numberOfValues}}" cols="50" style="white-space: nowrap;">

<textarea rows="{{field.numberOfValues}}" cols="50" style="white-space: nowrap;">