How can I generate an array from each line of a textarea with AngularJS

Question

I'm attempting to create a textarea who's input is bound to a JS array where entries correspond to each line in the text area.

I've been attempting to use ngList with it's optional parameter to specify the delimiter. I can make it work with the default (,) by adding a comma after each line of the textarea, but I really do not want to require that.

the textarea

<textarea ng-model="list"
          rows="5"
          ng-list="\n" >
</textarea>

with the input:

test1
test2
test3

The generated output is ["test1\ntest2\ntest3"]

What I am looking for is: ["test1","test2",test3"]

Plnkr Demo

@ZachL I'm interested to see how you handle the initial binding... (because as soon as you add something it condenses your array to one string ["test1, test2, test3","something new"] jsfiddle.net/ncapito/wKquG/21 — Nix
– Nix, Commented Apr 8, 2014 at 15:13
@Nix, I'm not entirely sure I know what you mean... could you provide a demo perhaps (or if its worth it, a new question)? Check out this demo — Zach Lysobey
– Zach Lysobey, Commented Apr 8, 2014 at 15:23
I gave you a sample, just initialize your list with something in it ( $scope.list = ["1","2"];. Type a key in the text area and your list will now be ["1,2", "New item"] — Nix
– Nix, Commented Apr 8, 2014 at 15:30

Zach Lysobey · Accepted Answer · 2015-06-16 15:09:52Z

16

This was updated in Angular 1.3 and now works like this:

<textarea ng-model="list" ng-list="&#10;" ng-trim="false"></textarea>

add ng-trim="false" directive to the <textarea> tag
use the ASCII code for newline character:

edited Jun 16, 2015 at 15:09

Zach Lysobey

15.9k21 gold badges101 silver badges152 bronze badges

answered Jan 29, 2015 at 19:38

OrangeSalty

2023 silver badges5 bronze badges

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

1 Comment

muasif80 Over a year ago

In case I want to update the ng-model and want to reflect it in the textarea, it does not work with ng-trim and ng-list attributes. When i remove it works. But i need this feature.

Community · Accepted Answer · 2017-05-23 10:30:59Z

5

EDIT: As of Angular 1.3, this answer is obsolete.

Please refer to @OrangeSalty's answer

From the (1.2) ngList docs:

If specified in form /something/ then the value will be converted into a regular expression.

I just added the /'s and it magically worked!

<textarea ng-model="list"
          rows="5"
          ng-list="/\n/" >
</textarea>

updated plnkr demo

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 8, 2014 at 15:11

Zach Lysobey

15.9k21 gold badges101 silver badges152 bronze badges

Comments

Chris Charles · Accepted Answer · 2014-04-08 15:11:05Z

2

You could split the output angular gives you:

var result = ["test1\ntest2\ntest3"][0].split("\n")

// result = ["test1", "test2", "test3"]

(Although the solution you've posted is much better!)

answered Apr 8, 2014 at 15:11

Chris Charles

4,44620 silver badges31 bronze badges

2 Comments

Zach Lysobey Over a year ago

Thanks Chris! This certainly would work, but of course I'll go for the more idiomatic approach. Funny how I bang my head against this for an hour, then within almost seconds of posting on SO, I get it working.

Iqbal Fauzi Over a year ago

look like you miss the ngList.

Collectives™ on Stack Overflow

How can I generate an array from each line of a textarea with AngularJS

3 Answers 3

1 Comment

EDIT: As of Angular 1.3, this answer is obsolete.

Please refer to @OrangeSalty's answer

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

EDIT: As of Angular 1.3, this answer is obsolete.

Please refer to @OrangeSalty's answer

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related