Iterating through an array of objects and displaying the values in textarea
Question
I have to loop through an array of objects and display the values in textarea. Below is the code i tried so far:
<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>
The values are getting displayed in different textareas. How to display the values in the same textarea?Attached the plunkr link : http://plnkr.co/edit/DF2Na5vHd9SKu9MHQFvb?p=preview
2 answers
solution1
2 2019-01-09 18:22:36
You do not need ng-repeat here, you could join all the elements with the folliwing and call the function
$scope.textAreaValues = function() {
return $scope.items.map(function(elem) {
return elem.name;
}).join("\n");
}
solution2
1 ACCPTED 2019-01-09 18:36:34
Should you want to take advantage of two-way data binding, so that users entered manually into the textarea would appear in your model, then you may use a directive with custom $formatter and $parser (to match your data structure):
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 };
});
})
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.