fix(ngList): use custom separators for re-joining list items

The separator string used to split the view value into a list for the model
value is now used to join the list items back together again for the view value.

BREAKING CHANGE:

The `ngList` directive no longer supports splitting the view value
via a regular expression. We need to be able to re-join list items back
together and doing this when you can split with regular expressions can
lead to inconsistent behaviour and would be much more complex to support.

If your application relies upon ngList splitting with a regular expression
then you should either try to convert the separator to a simple string or
you can implement your own version of this directive for you application.

Closes #4008
Closes #2561
Closes #4344

Author: purcell

src/ng/directive/input.js

@@ -2353,8 +2353,7 @@ var minlengthDirective = function() {
  * can be a fixed string (by default a comma) or a regular expression.
  *
  * @element input
- * @param {string=} ngList optional delimiter that should be used to split the value. If
- *   specified in form `/something/` then the value will be converted into a regular expression.
+ * @param {string=} ngList optional delimiter that should be used to split the value.
  *
  * @example
     <example name="ngList-directive" module="listExample">
@@ -2403,8 +2402,7 @@ var ngListDirective = function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attr, ctrl) {
-      var match = /\/(.*)\//.exec(attr.ngList),
-          separator = match && new RegExp(match[1]) || attr.ngList || ',';
+      var separator = attr.ngList || ', ';
 
       var parse = function(viewValue) {
         // If the viewValue is invalid (say required but empty) it will be `undefined`
@@ -2413,7 +2411,7 @@ var ngListDirective = function() {
         var list = [];
 
         if (viewValue) {
-          forEach(viewValue.split(separator), function(value) {
+          forEach(viewValue.split(trim(separator)), function(value) {
             if (value) list.push(trim(value));
           });
         }
@@ -2424,7 +2422,7 @@ var ngListDirective = function() {
       ctrl.$parsers.push(parse);
       ctrl.$formatters.push(function(value) {
         if (isArray(value)) {
-          return value.join(', ');
+          return value.join(separator);
         }
 
         return undefined;

test/ng/directive/inputSpec.js

@@ -2633,7 +2633,7 @@ describe('input', function() {
     it("should not clobber text if model changes due to itself", function() {
       // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the
       // $parseModel function runs it will change to 'a', in essence preventing
-      // the user from ever typying ','.
+      // the user from ever typing ','.
       compileInput('<input type="text" ng-model="list" ng-list />');
 
       changeInputValueTo('a ');
@@ -2675,22 +2675,23 @@ describe('input', function() {
     it('should allow custom separator', function() {
       compileInput('<input type="text" ng-model="list" ng-list=":" />');
 
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x:y:z');
+
       changeInputValueTo('a,a');
       expect(scope.list).toEqual(['a,a']);
 
       changeInputValueTo('a:b');
       expect(scope.list).toEqual(['a', 'b']);
     });
 
+    it('should ignore separator whitespace when splitting', function() {
+      compileInput('<input type="text" ng-model="list" ng-list="  |  " />');
 
-    it('should allow regexp as a separator', function() {
-      compileInput('<input type="text" ng-model="list" ng-list="/:|,/" />');
-
-      changeInputValueTo('a,b');
+      changeInputValueTo('a|b');
       expect(scope.list).toEqual(['a', 'b']);
-
-      changeInputValueTo('a,b: c');
-      expect(scope.list).toEqual(['a', 'b', 'c']);
     });
   });