Question

我必须遍历对象数组并在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>

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

Answer 1

在这里您不需要ng-repeat，您可以将所有元素都弄虚作假并调用函数

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

PLUNKER DEMO

Answer 2

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

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 };
          });
      })
    }
  }
});

$parser

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

2 个答案: