fix(ngSelect): Support not selected option on multi select with ngOptions

Shows the static option for a not selected value in a select with
ngOption also when the multiple attribute is used.

Closes angular#4325
Closes angular#5938

Author: siddii

src/ng/directive/select.js

@@ -359,17 +359,19 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
 
                 for(index = 1, length = optionGroup.length; index < length; index++) {
                   if ((optionElement = optionGroup[index].element)[0].selected) {
-                    key = optionElement.val();
-                    if (keyName) locals[keyName] = key;
-                    if (trackFn) {
-                      for (trackIndex = 0; trackIndex < collection.length; trackIndex++) {
-                        locals[valueName] = collection[trackIndex];
-                        if (trackFn(scope, locals) == key) break;
+                    if (optionElement[0] !== nullOption[0]) {
+                      key = optionElement.val();
+                      if (keyName) locals[keyName] = key;
+                      if (trackFn) {
+                        for (trackIndex = 0; trackIndex < collection.length; trackIndex++) {
+                          locals[valueName] = collection[trackIndex];
+                          if (trackFn(scope, locals) == key) break;
+                        }
+                      } else {
+                        locals[valueName] = collection[key];
                       }
-                    } else {
-                      locals[valueName] = collection[key];
+                      value.push(valueFn(scope, locals));
                     }
-                    value.push(valueFn(scope, locals));
                   }
                 }
               }
@@ -479,14 +481,12 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
               selected: selected                   // determine if we should be selected
             });
           }
-          if (!multiple) {
-            if (nullOption || modelValue === null) {
-              // insert null option if we have a placeholder, or the model is null
-              optionGroups[''].unshift({id:'', label:'', selected:!selectedSet});
-            } else if (!selectedSet) {
-              // option could not be found, we have to insert the undefined item
-              optionGroups[''].unshift({id:'?', label:'', selected:true});
-            }
+          if (nullOption || modelValue === null) {
+            // insert null option if we have a placeholder, or the model is null
+            optionGroups[''].unshift({id:'', label:'', selected:!selectedSet});
+          } else if (!selectedSet) {
+            // option could not be found, we have to insert the undefined item
+            optionGroups[''].unshift({id:'?', label:'', selected:true});
           }
 
           // Now we need to update the list of DOM nodes to match the optionGroups we computed above

test/ng/directive/selectSpec.js

@@ -1148,6 +1148,123 @@ describe('select', function() {
       });
 
 
+      describe('blank option', function () {
+
+        it('should be compiled as template, be watched and updated', function () {
+          var option;
+          createMultiSelect('<option value="">blank is {{blankVal}}</option>');
+
+          scope.$apply(function() {
+            scope.blankVal = 'so blank';
+            scope.values = [{name: 'A'}];
+          });
+
+          // check blank option is first and is compiled
+          expect(element.find('option').length).toBe(2);
+          option = element.find('option').eq(0);
+          expect(option.val()).toBe('');
+          expect(option.text()).toBe('blank is so blank');
+
+          scope.$apply(function() {
+            scope.blankVal = 'not so blank';
+          });
+
+          // check blank option is first and is compiled
+          expect(element.find('option').length).toBe(2);
+          option = element.find('option').eq(0);
+          expect(option.val()).toBe('');
+          expect(option.text()).toBe('blank is not so blank');
+        });
+
+
+        it('should support binding via ngBindTemplate directive', function () {
+          var option;
+          createMultiSelect('<option value="" ng-bind-template="blank is {{blankVal}}"></option>');
+
+          scope.$apply(function() {
+            scope.blankVal = 'so blank';
+            scope.values = [{name: 'A'}];
+          });
+
+          // check blank option is first and is compiled
+          expect(element.find('option').length).toBe(2);
+          option = element.find('option').eq(0);
+          expect(option.val()).toBe('');
+          expect(option.text()).toBe('blank is so blank');
+        });
+
+
+        it('should support binding via ngBind attribute', function () {
+          var option;
+          createMultiSelect('<option value="" ng-bind="blankVal"></option>');
+
+          scope.$apply(function() {
+            scope.blankVal = 'is blank';
+            scope.values = [{name: 'A'}];
+          });
+
+          // check blank option is first and is compiled
+          expect(element.find('option').length).toBe(2);
+          option = element.find('option').eq(0);
+          expect(option.val()).toBe('');
+          expect(option.text()).toBe('is blank');
+        });
+
+
+        it('should be rendered with the attributes preserved', function () {
+          var option;
+          createMultiSelect('<option value="" class="coyote" id="road-runner" ' +
+            'custom-attr="custom-attr">{{blankVal}}</option>');
+
+          scope.$apply(function() {
+            scope.blankVal = 'is blank';
+          });
+
+          // check blank option is first and is compiled
+          option = element.find('option').eq(0);
+          expect(option.hasClass('coyote')).toBeTruthy();
+          expect(option.attr('id')).toBe('road-runner');
+          expect(option.attr('custom-attr')).toBe('custom-attr');
+        });
+
+        it('should not be selected, if it is available and no other option is selected', function() {
+          // selectedIndex is used here because jqLite incorrectly reports element.val()
+          scope.$apply(function() {
+            scope.values = [{name: 'A'}];
+          });
+          createMultiSelect(true);
+          // ensure the first option (the blank option) is selected
+          expect(element[0].selectedIndex).toEqual(-1);
+          scope.$digest();
+          // ensure the option has not changed following the digest
+          expect(element[0].selectedIndex).toEqual(-1);
+        });
+
+        it('should unselect itself when selected', function() {
+          var option;
+          createMultiSelect(true);
+          scope.$apply(function() {
+            scope.values = [{name: 'A'}];
+          });
+          option = element.find('option').eq(0);
+          option.prop('selected', true);
+          browserTrigger(element, 'change');
+          expect(option.prop('selected')).toBe(false);
+        });
+
+        it('should not add the null value to the result when selected', function() {
+          var option;
+          createMultiSelect(true);
+          scope.$apply(function() {
+            scope.values = [{name: 'A'}];
+          });
+          option = element.find('option').eq(0);
+          option.prop('selected', true);
+          browserTrigger(element, 'change');
+          expect(scope.selected).toEqual([]);
+        });
+      });
+
       it('should update model on change', function() {
         createMultiSelect();