ngList does not properly data bind from model to view

[jeremy1015]

https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1238
http://jsfiddle.net/jeremysager/md6mR/

[zdexter]

The optional argument allows you to split data coming in from the view. It doesn't allow you to split data going from the model to the view.

Specifically, ng-list="{/|/}" means that a parser in $parsers will split input at the vertical line character when new input comes in from the view, and propagate that change to the model.

But in ngModelController, $setViewValue does not run $parsers because the model has been updated; it runs everything in $parsers when view has been updated. So, if you pass a delimiter to ng-list and bind to an array or other variable, the variable will be not split on the delimiter before the initial rendering. (It will be split on subsequent renderings resulting from changes in the view.)

Before rendering the model's initial value to the view, Angular could:

1. If the bound variable is an array, join its elements. This is what happens right now. Any later changes to the view will give you back an array split at the delimiter you passed in. You can see this by typing a | into either input box on the jsfiddle above.
2. Split the bound variable (the string if it's a string, or each element of the array of it's an array) at the delimiter. Merge the result into the existing array or string. Then join the array elements into a string. Effectively, this would be splitting at both array elements and the delimiter.

Do you have a use case that requires # 2?

[pkozlowski-opensource]

@zdexter ngList should (normally) convert [separator]-separated values from a view to an array in the model and back (so model array to a string that is build from array's elements separated by a separator).

ngList - as it is today - allows you to specify a separator for view->model parsing but uses hard-coded comma (,) when doing model->view transformations.

[jeremy1015]

@zdexter My actual use case is # 1. I'm passing in an array. However, it doesn't behave as I would expect. Instead of joining the elements on the separator I've provided, it joins the elements on a comma. Which means if I pass in an array with three strings, I wind up with an array with one comma separated string in it afterwards.

Rereading my comment, it's not as clear as I would like. You wrote "1) If the bound variable is an array, join its elements." This is exactly what I want, but I want it joined on the provided separator, not a comma. Otherwise it breaks when it goes the other direction.

Hope that makes it more clear.

[zdexter]

It seems to make sense to display the initial model data delimited by your chosen delimiter. That's what happens on all subsequent view-initiated model updates, it seems logical that it should happen on initial rendering and other model -> view updates. Anyone know whether using the passed delimiter for model -> view transformations will break existing code (i.e., in practice, does anyone actually add data to the model before rendering an ng-list) or otherwise have negative effects?

As far as I can tell, this might be somewhat nontrivial, as any special characters inside the regular expression in ngListDirective's link() function are returned by the RegEx object as literal ASCII characters (for example, \n is literally backlash n instead of ASCII 10, or newline). So model -> view transformations will require unescaping these characters. Would appreciate any thoughts on how to handle this without adding lots of code. I'd be particularly interested to know whether such unescaping functionality is already in the Angular codebase.

[jtymes]

@jeremy1015 @pkozlowski-opensource
Getting the provided separator used instead of using comma by default is nontrivial for standard characters. Supporting things such as \n looks a bit more difficult, as @zdexter pointed out. Question is, is that in the scope of of ngList? Should it handle newline characters?

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[freelancewebdev]

There is also the unintuitive behaviour of the controller in the ngModel directive described at http://t.co/dvTaIjUniy which means that a text input with an ng-list and an array based ng-model will not update when new items are pushed into the array. Since this was the issue that led me here, pointing it out might save someone else some head scratching.