遍历对象数组并在 textarea 中显示值
Posted
技术标签:
【中文标题】遍历对象数组并在 textarea 中显示值【英文标题】：Iterating through an array of objects and displaying the values in 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>），它会正常工作吗？
【参考方案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
【讨论】：
以上是关于遍历对象数组并在 textarea 中显示值的主要内容，如果未能解决你的问题，请参考以下文章
ember JS：遍历json列表并在Handlebars中显示