Angularjs：在 TextArea 中打印带有新行的数组模型答案

【问题标题】：Angularjs: Printing an Array model with new lines in a TextAreaAngularjs：在 TextArea 中打印带有新行的数组模型
【发布时间】：2014-08-22 21:38:04
【问题描述】：

我有一个简单的 textarea 控件，

<div ng-controller="TodoCtrl">
      <textarea ng-model="myArray"></textarea>
  </div>

和一个字符串数组的模型：

function TodoCtrl($scope) {
  $scope.myArray = [
      "something1", 
      "something2",
      "something3",
   ];    
}

我试图让每个条目都在自己的行上：

something1 
something2
something3

为了获得额外的荣誉，希望将文本重新拆分为模型端的数组。

我已经尝试了一些东西，包括 ng-list、custom directives、自定义过滤器和 ng-repeat，但没有得到任何结果。

小提琴示例：

http://jsfiddle.net/U3pVM/8162/

【问题讨论】：

我的感觉是过滤器在这里是合适的，但我无法让它与 ng-model 中的双向绑定一起工作

标签： javascript html arrays angularjs textarea

【解决方案1】：

我不确定我是否理解您想要实现的目标。小提琴中没有文本区域。

您可以修改数组以在每个字符串的末尾添加换行符。不确定这是否有帮助？

$scope.myArr = ['111\n', '222\n', '333\n']

http://jsfiddle.net/U3pVM/8161/

你的小提琴有很多信息，也许让它更简单？显示输入和输出。

编辑：

是输入输出吗？如果只是为了输出，你可以这样做： http://jsfiddle.net/U3pVM/8164/

【讨论】：

哎呀，包括错误的小提琴。现在修好了。问题的症结在于添加这些“\n”的最佳方式。我认为 Angular 在将模型转换为漂亮的显示格式并返回 [需要引用] 方面有更多的魔力。
是的，它最终用于 REST 获取和发布。我希望对此进行更清晰的封装，而不是每次在控制器中序列化/反序列化数组，但是，我想这就是控制器的用途......

【解决方案2】：

你想要的是有两个变量。本质上，您的 textarea 是一个文本字符串。因此，如果您需要一个数组，请在字符串模型上设置一个观察者。

http://jsfiddle.net/U3pVM/8165/

$scope.myStr = 'aaaa\nbbbb\nccccc';
$scope.$watch('myStr', function(myStr){
    $scope.myArray = myStr.split('\n');
    console.log('$scope.myArray', $scope.myArray);
});

【讨论】：