在textarea中渲染由换行符分隔的多个值

Question

我正在以角度渲染动态表单。当属性有多个值时，我希望在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>

这就是我得到的，我认为这是因为我使用每个ng-repeat循环渲染

元素，并且textarea不承认它：

在这种情况下，我可以在没有任何html元素“段落”的情况下进行ng-repeat吗？ 还是以其他方式完成这项工作？

Answer 1

这就是诀窍：

  <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>

该按钮运行以下功能，但仅用于测试：

  $scope.addValue = function(field) {
    field.theValues[(field.numberOfValues)] = "aaaa";
    field.numberOfValues++;
  };

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

我使用“white-space”属性修复了缩进问题：

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