fix(select): allow empty option to be added dynamically by ng-repeat

slavede · petebacondarwin · commit abf59c285c3f · 2015-04-22T18:00:34.000+01:00
The select directive supports provision of an "empty" element that is used if the value of the select is undefined. This fix ensures that this empty option can be provided dynamically after the initial compilation has completed. Closes angular#11470 Closes angular#11512
diff --git a/src/ng/directive/ngOptions.js b/src/ng/directive/ngOptions.js
@@ -370,7 +370,16 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
       var selectCtrl = ctrls[0];
       var multiple = attr.multiple;
 
-      var emptyOption = selectCtrl.emptyOption;
+      // The emptyOption allows the application developer to provide their own custom "empty"
+      // option when the viewValue does not match any of the option values.
+      var emptyOption;
+      for (var i = 0, children = selectElement.children(), ii = children.length; i < ii; i++) {
+        if (children[i].value === '') {
+          emptyOption = children.eq(i);
+          break;
+        }
+      }
+
       var providedEmptyOption = !!emptyOption;
 
       var unknownOption = jqLite(optionTemplate.cloneNode(false));
diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
@@ -42,19 +42,6 @@ var SelectController =
     if (self.unknownOption.parent()) self.unknownOption.remove();
   };
 
-  // Here we find the option that represents the "empty" value, i.e. the option with a value
-  // of `""`.  This option needs to be accessed (to select it directly) when setting the value
-  // of the select to `""` because IE9 will not automatically select the option.
-  //
-  // Additionally, the `ngOptions` directive uses this option to allow the application developer
-  // to provide their own custom "empty" option when the viewValue does not match any of the
-  // option values.
-  for (var i = 0, children = $element.children(), ii = children.length; i < ii; i++) {
-    if (children[i].value === '') {
-      self.emptyOption = children.eq(i);
-      break;
-    }
-  }
 
   // Read the value of the select control, the implementation of this changes depending
   // upon whether the select can have multiple values and whether ngOptions is at work.
@@ -83,8 +70,11 @@ var SelectController =
 
 
   // Tell the select control that an option, with the given value, has been added
-  self.addOption = function(value) {
+  self.addOption = function(value, element) {
     assertNotHasOwnProperty(value, '"option value"');
+    if (value === '') {
+      self.emptyOption = element;
+    }
     var count = optionsMap.get(value) || 0;
     optionsMap.put(value, count + 1);
   };
@@ -95,6 +85,9 @@ var SelectController =
     if (count) {
       if (count === 1) {
         optionsMap.remove(value);
+        if (value === '') {
+          self.emptyOption = undefined;
+        }
       } else {
         optionsMap.put(value, count - 1);
       }
diff --git a/test/ng/directive/selectSpec.js b/test/ng/directive/selectSpec.js
@@ -200,6 +200,70 @@ describe('select', function() {
 
     describe('empty option', function() {
 
+      it('should allow empty option to be added and removed dynamically', function() {
+
+        scope.dynamicOptions = [];
+        scope.robot = '';
+        compile('<select ng-model="robot">' +
+                  '<option ng-repeat="opt in dynamicOptions" value="{{opt.val}}">{{opt.display}}</option>' +
+                '</selec>');
+        expect(element).toEqualSelect(['? string: ?']);
+
+
+        scope.dynamicOptions = [
+          { val: '', display: '--select--' },
+          { val: 'x', display: 'robot x' },
+          { val: 'y', display: 'robot y' }
+        ];
+        scope.$digest();
+        expect(element).toEqualSelect([''], 'x', 'y');
+
+
+        scope.robot = 'x';
+        scope.$digest();
+        expect(element).toEqualSelect('', ['x'], 'y');
+
+
+        scope.dynamicOptions.shift();
+        scope.$digest();
+        expect(element).toEqualSelect(['x'], 'y');
+
+
+        scope.robot = undefined;
+        scope.$digest();
+        expect(element).toEqualSelect([unknownValue(undefined)], 'x', 'y');
+      });
+
+
+    it('should cope with a dynamic empty option added to a static empty option', function() {
+        scope.dynamicOptions = [];
+        scope.robot = 'x';
+        compile('<select ng-model="robot">' +
+                  '<option value="">--static-select--</option>' +
+                  '<option ng-repeat="opt in dynamicOptions" value="{{opt.val}}">{{opt.display}}</option>' +
+                '</selec>');
+        scope.$digest();
+        expect(element).toEqualSelect([unknownValue('x')], '');
+
+        scope.robot = undefined;
+        scope.$digest();
+        expect(element.find('option').eq(0).prop('selected')).toBe(true);
+        expect(element.find('option').eq(0).text()).toBe('--static-select--');
+
+        scope.dynamicOptions = [
+          { val: '', display: '--dynamic-select--' },
+          { val: 'x', display: 'robot x' },
+          { val: 'y', display: 'robot y' }
+        ];
+        scope.$digest();
+        expect(element).toEqualSelect([''], '', 'x', 'y');
+
+
+        scope.dynamicOptions = [];
+        scope.$digest();
+        expect(element).toEqualSelect(['']);
+    });
+
       it('should select the empty option when model is undefined', function() {
         compile('<select ng-model="robot">' +
                   '<option value="">--select--</option>' +
