CODEWITHSUNDEEP
javascriptangularjsarrays
Pure Rhymer Organization
Pure Rhymer Organization

Reputation: 536

AngularJs array inside of array display in textarea

I have this kind of data

$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]

How can I display it in textarea like this?

<textarea>
  google
  stackoverflow
  angular
</textarea>

What I tried is

<tr ng-repeat="list in data">
  <td>
    <textarea ng-repeat="x in data.production_list">
       {{x.product}}
    </textarea>
  </td>
</tr>

The output is

<textarea>
  google
</textarea>
<textarea>
  stackoverflow
</textarea>
<textarea>
  angular
</textarea>

And is this a possible to have an increment? Because instead of ng-repeat its better to make it like this

<textarea value="data.production_list[$index].product">
</textarea>

however $index is not working its value is 0

Upvotes: 0

Views: 939

Answers (3)

MrNobody007
MrNobody007

Reputation: 1837

Instead of writing it as a scope function you can make use of filter so that you can easily re-use code across module.

var app = angular.module('myApp', []);
app.filter('joinAttrs', function() {
    return function(list, attrName) {
        var joinedStr = "";
        for(var i=0; i<list.length; i++){
          joinedStr += list[i][attrName];
        }
        return joinedStr;
    };
});
app.controller('DemoCtrl', function($scope) {
    $scope.data = [{
      "production_list": [
        {"product": "google\n"},
        {"product": "stackoverflow\n"},
        {"product": "angular\n"}
       ]
    }]
});
textarea {
  height: 100px;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl">
  <div ng-repeat="list in data">
    <textarea>{{list.production_list | joinAttrs:'product'}}</textarea>
  </div>
</div>

Upvotes: 3

jitender
jitender

Reputation: 10429

Create an function inside your controller and use it in text area something like

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]
$scope.textAreaValues = function(data){
  var retVal=  data.reduce(function(a,b){
  return {product: a.product + b.product};
  });
  return retVal.product;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="list in data">
  <td>
    <textarea>
     {{textAreaValues(list.production_list)}}
    </textarea>
  </td>
</tr>
</table>
</div>

Upvotes: 1

justin
justin

Reputation: 439

You could create a function that joins the data from the array first, then use that as your ng-model.

In your controller:

 $scope.textareaData = data[0].production_list
  .map(function(item) {
    return item.product;
  })
  .join('');

Then your textarea would be:

<textarea ng-model="textareaData"></textarea>

This will output each product inside your textarea.

Upvotes: 1

Related Questions