遍历对象数组并在 textarea 中显示值答案

【问题标题】：Iterating through an array of objects and displaying the values in textarea遍历对象数组并在 textarea 中显示值
【发布时间】：2019-06-04 13:49:00
【问题描述】：

我必须遍历一个对象数组并在 textarea 中显示值。以下是我目前尝试的代码：

<body ng-controller="testCtrl">
<div class="container" ng-repeat="i in items">
    <div class="containerDescription">
        <textarea ng-model="i.name" 
          style="height:120px; width:200px;"></textarea><br>

    </div>

这些值显示在不同的文本区域中。如何在同一个 textarea 中显示值？附上 plunkr 链接：http://plnkr.co/edit/DF2Na5vHd9SKu9MHQFvb?p=preview

【问题讨论】：

我对 Angular 不太熟悉，但考虑到您的设置和行为，我假设您的循环正在根据您的 ng-model 参数创建一个新的 textarea 实例。如果您将参数移动到文本区域内的元素（如<textarea><p ng-model="i.name"></p></textarea>），它会正常工作吗？

标签： javascript angularjs textarea

【解决方案1】：

这里不需要 ng-repeat，你可以将所有元素与以下内容连接起来并调用函数

$scope.textAreaValues = function() {
    return $scope.items.map(function(elem) {
      return elem.name;
    }).join("\n");
 }

PLUNKER DEMO

【讨论】：

嗨 Saneetharan 感谢您的解决方案。有没有办法可以在下一行显示值而不是逗号？

【解决方案2】：

如果您想利用双向数据绑定，以便用户手动输入textarea 会出现在您的模型中，那么您可以使用带有自定义$formatter 和$parser 的指令（以匹配你的数据结构）：

angular.module('demo').directive('formatNames', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$formatters.push(function(users) {
          return users.map(function(user) {
            return user.name;
          }).join('\n')
      });
      ctrl.$parsers.push(function(users) {
          return users.split('\n').map(function(name, i) {
            return { id: i, name: name };
          });
      })
    }
  }
});

http://plnkr.co/edit/9zXCyOUYjiRuIwcFwypz?p=preview

【讨论】：