diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 8ab6f696ca81..4f26ed696081 100644 --- a/src/ng/directive/input.js +++ b/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 @@ -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; diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index f8898074f13e..6ec1a25ab412 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -1009,9 +1009,62 @@ describe('input', function() { it('should allow custom separator', function() { compileInput(''); - 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(''); + + changeInputValueTo('House or Door or Chair'); + expect(scope.list).toEqual(['House', 'Door', 'Chair']); + }); + + + it('should allow custom join string', function() { + compileInput(''); + + // 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(''); + + // 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(''); + + // 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(''); + // 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(''); + + // model -> view + scope.$apply(function() { + scope.list = ['x', 'y', 'z']; + }); + expect(inputElm.val()).toBe('x; y; z'); + }); }); describe('required', function() {