handle all cases for multiple select

Author: Narretz

src/ng/directive/select.js

@@ -14,12 +14,15 @@ var SelectController =
         ['$element', '$scope', function($element, $scope) {
 
   var self = this,
-      optionsMap = new HashMap();
+      optionsMap = new HashMap(),
+      handleMultipleDestroy = false; // Flag to run an update to the model after selected options
+      // in a multiple select have been destroyed
 
   self.selectValueMap = {}; // Keys are the hashed values, values the original values
 
   // If the ngModel doesn't get provided then provide a dummy noop version to prevent errors
   self.ngModelCtrl = noopNgModelController;
+  self.multiple = false;
 
   // The "unknown" option is one that is prepended to the list if the viewValue
   // does not match any of the options. When it is rendered the value of the unknown
@@ -52,10 +55,7 @@ var SelectController =
     // ngValue added option values are stored in the selectValueMap, normal interpolations are not
     var realVal = val in self.selectValueMap ? self.selectValueMap[val] : val;
 
-    console.log('read', 'elval', val,  'possiblyhashed', realVal)
     if (self.hasOption(realVal)) {
-      console.log('has selected val', realVal)
-      // self.removeUnknownOption();
       return realVal;
     }
 
@@ -66,25 +66,15 @@ var SelectController =
   // Write the value to the select control, the implementation of this changes depending
   // upon whether the select can have multiple values and whether ngOptions is at work.
   self.writeValue = function writeSingleValue(value) {
-    console.log('write', value);
     if (self.hasOption(value)) {
-      console.log('hasOption', value);
       self.removeUnknownOption();
       var hashedVal = hashKey(value);
       if (hashedVal in self.selectValueMap) {
         $element.val(hashedVal);
       } else {
         $element.val(value);
       }
-      console.log('after set', $element.val())
-      // console.log('selectValueMap', self.selectValueMap)
-      // var items = new HashMap();
-      // items.put(value, value);
-      // console.log(items, hashKey(value));
-
-      // if (hashKey(value) in self.selectValueMap) {
-      //   console.log('hashed')
-      // }
+
       if (value === '') self.emptyOption.prop('selected', true); // to make IE9 happy
     } else {
       if (value == null && self.emptyOption) {
@@ -131,18 +121,32 @@ var SelectController =
     return !!optionsMap.get(value);
   };
 
+  var handleMultipleChanges = false;
+  function updateModelAfterOptionChange(renderAfter) {
+    if (self.multiple) {
+      if (!handleMultipleChanges) {
+        handleMultipleChanges = true;
+      } else {
+        $scope.$$postDigest(function() {
+          handleMultipleChanges = false;
+          self.ngModelCtrl.$setViewValue(self.readValue());
+          if (renderAfter) self.ngModelCtrl.$render();
+        });
+      }
+    } else {
+      self.ngModelCtrl.$setViewValue(self.readValue());
+    }
+  }
+
 
   self.registerOption = function(optionScope, optionElement, optionAttrs, interpolateValueFn, interpolateTextFn) {
 
-    // console.log('attr', optionAttrs)
     if (optionAttrs.$attr.ngValue) {
       // The value attribute is set by ngValue
       var oldVal, hashedVal = NaN;
       optionAttrs.$observe('value', function valueAttributeObserveAction(newVal) {
-        console.log('ngValue change', 'n', newVal, 'o', oldVal, 'hashed', hashedVal)
 
         var removal;
-        console.log('val', $element.val());
         var previouslySelected = optionElement.prop('selected');
 
         if (isDefined(hashedVal)) {
@@ -155,24 +159,19 @@ var SelectController =
         oldVal = newVal;
         self.selectValueMap[hashedVal] = newVal;
         self.addOption(newVal, optionElement);
-        console.log('val', $element.val());
         // Set the attribute directly instead of using optionAttrs.$set - this stops the observer
         // from firing a second time. Other $observers on value will also get the result of the
         // ngValue expression, not the hashed value
         optionElement.attr('value', hashedVal);
 
-        console.log('previouslySelected', previouslySelected, 'removal', removal)
-
         if (removal && previouslySelected) {
-          console.log('removed val is currently selected', $element.val())
-          self.ngModelCtrl.$setViewValue(self.readValue());
-        }  
+          updateModelAfterOptionChange();
+        }
 
       });
     } else if (interpolateValueFn) {
       // The value attribute is interpolated
       optionAttrs.$observe('value', function valueAttributeObserveAction(newVal) {
-        // console.log('value attribute changed', 'viewVal', self.ngModelCtrl.$viewValue, 'index', optionElement[0].index, 'indices', $element[0].selectedIndex, $element[0].selectedOptions)
         var currentVal = self.readValue();
         var removal;
         var previouslySelected = optionElement.prop('selected');
@@ -186,11 +185,9 @@ var SelectController =
         oldVal = newVal;
         self.addOption(newVal, optionElement);
 
-        console.log('updated interpolated value', 'new', newVal, 'removed', removedVal, 'current', currentVal);
         if (removal && previouslySelected) {
-          console.log('removed val is currently selected', $element.val())
-          self.ngModelCtrl.$setViewValue(self.readValue());
-        }        
+          updateModelAfterOptionChange();
+        }
       });
     } else if (interpolateTextFn) {
       // The text content is interpolated
@@ -203,7 +200,7 @@ var SelectController =
         self.addOption(newVal, optionElement);
 
         if (oldVal && previouslySelected) {
-          self.ngModelCtrl.$setViewValue(self.readValue());
+          updateModelAfterOptionChange();
         }
       });
     } else {
@@ -219,39 +216,33 @@ var SelectController =
       // we only have to handle options becomeing disabled, not enabled
 
       if (newVal === 'true' || newVal && optionElement.prop('selected')) {
-        console.log('disabled')
-        self.ngModelCtrl.$setViewValue(null);
-        self.ngModelCtrl.$render();
+
+        if (self.multiple) {
+          updateModelAfterOptionChange(true);
+        } else {
+          self.ngModelCtrl.$setViewValue(null);
+          self.ngModelCtrl.$render();
+        }
         oldDisabled = newVal;
-      } else if (isDefined(oldDisabled) && !newVal || newVal === 'false') {
-        // var val = optionAttrs.value;
-        // console.log('OA', optionAttrs.value);
-        // var realVal = val in self.selectValueMap ? self.selectValueMap[val] : val;
-        // console.log('back from disabled', val, realVal, self.ngModelCtrl.$viewValue);
-
-        // if (realVal === self.ngModelCtrl.$viewValue) {
-        //   self.writeValue(realVal);
-        //   self.ngModelCtrl.$setViewValue(self.readValue());
-        // }
       }
     });
 
     optionElement.on('$destroy', function() {
       var currentValue = self.readValue();
       var removeValue = optionAttrs.value;
 
-      console.log('destroy', removeValue, 'elval',  $element.val())
-      // console.log('viewValue', self.ngModelCtrl.$viewValue)
       self.removeOption(removeValue);
       self.ngModelCtrl.$render();
 
-      if (currentValue === removeValue) {
-        // console.log('removed val is currently selected', $element.val())
-        // console.log('self.readValue()', self.readValue());
+      if (self.multiple && currentValue && currentValue.indexOf(removeValue) !== -1) {
+        // When multiple (selected) options are destroyed at the same time, we don't want
+        // to run a model update for each of them. Instead, run a single update in the $$postDigest
+        // NOTE: Will that interfere with the regular model update? No - $setViewValue always triggers a digest
+        // However, it might not work if someones removes an option outside of a digest
+        updateModelAfterOptionChange();
+      } else if (currentValue === removeValue) {
         self.ngModelCtrl.$setViewValue(self.readValue());
-        
       }
-      // console.log('read after render', self.readValue())
     });
   };
 }];
@@ -487,7 +478,6 @@ var selectDirective = function() {
       // to the `readValue` method, which can be changed if the select can have multiple
       // selected values or if the options are being generated by `ngOptions`
       element.on('change', function() {
-        console.log('on change', element.val())
         selectCtrl.removeUnknownOption();
         scope.$apply(function() {
           ngModelCtrl.$setViewValue(selectCtrl.readValue());
@@ -499,12 +489,13 @@ var selectDirective = function() {
       // we have to add an extra watch since ngModel doesn't work well with arrays - it
       // doesn't trigger rendering if only an item in the array changes.
       if (attr.multiple) {
+        selectCtrl.multiple = true;
 
         // Read value now needs to check each option to see if it is selected
         selectCtrl.readValue = function readMultipleValue() {
           var array = [];
           forEach(element.find('option'), function(option) {
-            if (option.selected) {
+            if (option.selected && !option.disabled) {
               var val = option.value;
               array.push(val in selectCtrl.selectValueMap ? selectCtrl.selectValueMap[val] : val);
             }
@@ -570,6 +561,7 @@ var optionDirective = ['$interpolate', function($interpolate) {
       var interpolateValueFn, interpolateTextFn;
 
       if (isDefined(attr.ngValue)) {
+        // jshint noempty: false
         // Will be handled by registerOption
       } else if (isDefined(attr.value)) {
         // If the value attribute is defined, check if it contains an interpolation

src/ngMock/browserTrigger.js

@@ -95,6 +95,7 @@
       evnt = window.document.createEvent('MouseEvents');
       x = x || 0;
       y = y || 0;
+      // console.log('trigger', element.relatedTarget, eventType, pressed('ctrl'))
       evnt.initMouseEvent(eventType, true, true, window, 0, x, y, x, y, pressed('ctrl'),
           pressed('alt'), pressed('shift'), pressed('meta'), 0, relatedTarget);
     }