fix(ngList) Fix model to view rendering when using a custom separator

src/ng/directive/input.js

@@ -1225,6 +1225,8 @@ var requiredDirective = function() {
  * @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=} ngListJoin optional string to use when joining elements of the array.
+ * This is especially useful when the delimeter is a regular expression. The default value is ', '.
  *
  * @example
     <doc:example>
@@ -1263,8 +1265,20 @@ 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 || ',';
+      // Get the attribute values directly from the element rather than the
+      // attr map otherwise the attribute values will be trimmed of whitespace
+      var separatorAttribute = element[0].getAttribute(attr.$attr['ngList'])
+      var joinAttribute = element[0].getAttribute(attr.$attr['ngListJoin'])
+      var separator, joinedby;
+      var match = /\/(.*)\//.exec(separatorAttribute);
+      if (match) {
+        // This is a regex pattern - always use ', ' to join elements when ngListJoin is undefined
+        separator = new RegExp(match[1])
+        joinedby = joinAttribute || ', ';
+      }else{
+        separator = separatorAttribute || ','
+        joinedby = joinAttribute || separatorAttribute || ', ';
+      }
 
       var parse = function(viewValue) {
         var list = [];
@@ -1281,7 +1295,7 @@ var ngListDirective = function() {
       ctrl.$parsers.push(parse);
       ctrl.$formatters.push(function(value) {
         if (isArray(value)) {
-          return value.join(', ');
+          return value.join(joinedby);
         }
 
         return undefined;

test/ng/directive/inputSpec.js

@@ -1009,9 +1009,62 @@ describe('input', function() {
     it('should allow custom separator', function() {
       compileInput('<input type="text" ng-model="list" ng-list=":" />');
 
-      changeInputValueTo('a,a');
-      expect(scope.list).toEqual(['a,a']);
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x:y:z'); //Should use the separator as the join string
+
+      // view -> model
+      changeInputValueTo('a:b');
+      expect(scope.list).toEqual(['a', 'b']);
+    });
+
+
+    it('should allow custom separator with whitespace', function() {
+      compileInput('<input type="text" ng-model="list" ng-list=" or " />');
+
+      changeInputValueTo('House or Door or Chair');
+      expect(scope.list).toEqual(['House', 'Door', 'Chair']);
+    });
+
+
+    it('should allow custom join string', function() {
+      compileInput('<input type="text" ng-model="list" ng-list ng-list-join=" and "/>');
+
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x and y and z');
+    });
+
+
+    it('should allow custom separator and custom join string', function() {
+      compileInput('<input type="text" ng-model="list" ng-list=":" ng-list-join=" and "/>');
+
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x and y and z');
+
+      // view -> model
+      changeInputValueTo('a:b');
+      expect(scope.list).toEqual(['a', 'b']);
+    });
+
 
+    it('should allow custom separator and custom join string in alternative attribute form', function() {
+      compileInput('<input type="text" ng-model="list" ng:list=":" data-ng-list-join=" and "/>');
+
+      // model -> view
+      scope.$apply(function() {
+          scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x and y and z');
+
+      // view -> model
       changeInputValueTo('a:b');
       expect(scope.list).toEqual(['a', 'b']);
     });
@@ -1020,12 +1073,30 @@ describe('input', function() {
     it('should allow regexp as a separator', function() {
       compileInput('<input type="text" ng-model="list" ng-list="/:|,/" />');
 
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x, y, z'); //Should use ', ' as the default join string
+
+      // view -> model
       changeInputValueTo('a,b');
       expect(scope.list).toEqual(['a', 'b']);
 
       changeInputValueTo('a,b: c');
       expect(scope.list).toEqual(['a', 'b', 'c']);
     });
+
+
+    it('should allow regexp as a separator and custom join string', function() {
+      compileInput('<input type="text" ng-model="list" ng-list="/:|,/" ng-list-join="; " />');
+
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
+      });
+      expect(inputElm.val()).toBe('x; y; z');
+    });
   });
 
   describe('required', function() {