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

Question

我必须遍历对象数组并在文本区域中显示值。以下是我到目前为止尝试过的代码：

<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 link : http://plnkr.co/edit/DF2Na5vHd9SKu9MHQFvb?p=preview

Answer 1

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

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

PLUNKER DEMO

Answer 2

如果您想利用双向数据绑定，以便手动输入 textarea 的用户会出现在您的模型中，那么您可以使用带有自定义 $formatter and $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

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

Iterating through an array of objects and displaying the values in textarea

javascript

textarea

angularjs