CODEWITHSUNDEEP
javascripthtmlangularjs
Edgar
Edgar

Reputation: 503

filling a textarea with ng-repeat or ng-model so that it does not create a new textarea one on top of the other with the iterated data

im having issues trying to fill a single 10 row textarea with data using ng-repeat instead it creates a new textarea for every data entry. how can i just insert into one? and i would like to make the size of the textarea dynamic to the number of entries enterd by ng-repeat

this is my js file

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {
    $rootScope.title = 'Direct Requisitions';
    $scope.items = items;

    $scope.formatDate = function (x) {
        return moment(x).format("M/D/YYYY");
    };
};

and this is my html file, specifically the area im trying to insert.

  <div class="row ">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <div class="form-group">
              <label>Items</label>
              <div ng-repeat="item in req.items">
                  <textarea ng-model="item.description" class="form-control" type="text" readonly="readonly"></textarea>
              </div>
          </div>
      </div>
  </div>

and this does the same thing

  <div class="row ">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <div class="form-group">
              <label>Items</label>
              <textarea ng-repeat="item in req.items" class="form-control" type="text" readonly="readonly">{{item.description}}</textarea>    
          </div>
      </div>
  </div>

i have changed my js to look like this

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {
$rootScope.title = 'Direct Requisitions';
//$scope.items = items;




$scope.formatDate = function (x) {
    return moment(x).format("M/D/YYYY");
   };
};

function TodoCtrl($scope) {
  $scope.items = items.join('\n');
  $scope.$watch('items', function (items) {
    $scope.myArray = items.split('\n');
    console.log('$scope.myArray', $scope.myArray);

 });



  }

and my html to look like this 

            <!-- <div class="row ">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="form-group" ng-app>
        <label>Items</label>-->
        <div ng-app>
            <div ng-controller="TodoCtrl">
                <textarea rows={{rows}}  class="form-control" ng-model="myStr" type="text" readonly="readonly"></textarea>
            </div>
        </div>
               <!-- </div>
            </div>
        </div>-->

but nothing populates if i change this around to look like this http://jsfiddle.net/U3pVM/8165/

it works..i dont get it i need item.description i dont know if that has anything to do with it

Upvotes: 2

Views: 4619

Answers (2)

Andrew Sheehan
Andrew Sheehan

Reputation: 300

Join the items into a single string, separated by newlines

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {

    $rootScope.title = 'Direct Requisitions';

    $scope.items = items
        .map(function (item) {
            return item.description;
        })
        .join('\n');

    $scope.rows = items.length;

    $scope.formatDate = function (x) {
        return moment(x).format("M/D/YYYY");
    };

};

You can then use the length of the items array to set the number or rows on the text area.

<textarea type="text" class="form-controler readonly="readonly" rows="rows"
          ng-model="items">
</textarea>

Plunker for example: http://plnkr.co/edit/SXSl4nHJi8ptufP6wTd4?p=preview

Upvotes: 6

user393219
user393219

Reputation:

You're ng-repeating <textarea> (either in itself, or through a containing div) so that it iterates over each instance of item. What you need to do is get rid of the ng-repeat all together and use ng-model to concatenate a string, as demonstrated in ajs's answer.

Upvotes: 0

Related Questions