Angularjs: Printing an Array model with new lines in a TextArea

Question

I have a simple textarea control,

<div ng-controller="TodoCtrl">
      <textarea ng-model="myArray"></textarea>
  </div>

and a model that is an array of strings:

function TodoCtrl($scope) {
  $scope.myArray = [
      "something1", 
      "something2",
      "something3",
   ];    
}

Im trying to get it so that every entry is on its own line:

something1 
something2
something3

And for extra credit would like to resplit the text back into an array on hte model side.

I've tried a few things, including ng-list, custom directives, custom filters, and ng-repeat, but haven't gotten any where.

fiddle Example:

http://jsfiddle.net/U3pVM/8162/

My feeling is that a filter is proper here, but i couldn't get it to work with the two way binding in ng-model — Zak Kus
– Zak Kus, Commented Aug 22, 2014 at 21:45

alexrogers · Accepted Answer · 2014-08-22 22:25:54Z

1

I'm not sure I understand what you're trying to achieve. There is no textarea in the fiddle.

You can doctor your array to have new line characters at the end of each string. Not sure if that helps?

$scope.myArr = ['111\n', '222\n', '333\n']

http://jsfiddle.net/U3pVM/8161/

Your fiddle has quite a lot of info in, maybe make it simpler? Showing input and output.

Edit:

Is it for input and output? If just for output, you could just do something like this: http://jsfiddle.net/U3pVM/8164/

edited Aug 22, 2014 at 22:25

answered Aug 22, 2014 at 22:12

alexrogers

1,5841 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zak Kus Over a year ago

oops, included the wrong fiddle. Fixed now. The crux of the question is around teh best way to add those '\n'. I thought angular had more magic around converting the models to a nice display format and back [citation needed].

Zak Kus Over a year ago

yeah its ultimately for a REST get and post. I was hoping for a cleaner encapsulation of this rather than just serializing/deserializing the array every time in the controller, but then, i guess thats what controllers are there for...

alexrogers · Accepted Answer · 2014-08-22 22:31:09Z

1

What you want is to have two vars. Essentially your textarea is a text string. So if you need an array then set up a watcher on the string model.

http://jsfiddle.net/U3pVM/8165/

$scope.myStr = 'aaaa\nbbbb\nccccc';
$scope.$watch('myStr', function(myStr){
    $scope.myArray = myStr.split('\n');
    console.log('$scope.myArray', $scope.myArray);
});

answered Aug 22, 2014 at 22:31

alexrogers

1,5841 gold badge16 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angularjs: Printing an Array model with new lines in a TextArea

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related