fix(select): make ngOptions support selectAs and trackBy together

This commit implements a function, "getSelected()", that takes the
selectAs expression into account when determining if a particular
option is selected or not. Previously, the selectAs part of the
ngOptions comprehension expression was being ignored.

Fixes #6564

Author: jeffbcross

src/ng/directive/select.js

@@ -35,6 +35,12 @@ var ngOptionsMinErr = minErr('ngOptions');
  * be bound to string values at present.
  * </div>
  *
+ * <div class="alert alert-info">
+ * **Note:** The values that are stored on the underlying option elements (i.e. `option.value`) are set
+ * to either the indeces of the array (for array data sources) or the property names of
+ * the object (for object data sources).
+ * </div>
+ *
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} name Property name of the form under which the control is published.
  * @param {string=} required The control is considered valid only if value is entered.
@@ -69,7 +75,9 @@ var ngOptionsMinErr = minErr('ngOptions');
  *      DOM element.
  *   * `trackexpr`: Used when working with an array of objects. The result of this expression will be
  *      used to identify the objects in the array. The `trackexpr` will most likely refer to the
- *     `value` variable (e.g. `value.propertyName`).
+ *     `value` variable (e.g. `value.propertyName`). With this the selection is preserved
+ *      even when the options are recreated (e.g. reloaded from the server).
+ *      Note that this does not work when there is a `select` expression that is different from the `trackexpr`.
  *
  * @example
     <example module="selectExample">
@@ -326,6 +334,8 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
 
         var displayFn = $parse(match[2] || match[1]),
             valueName = match[4] || match[6],
+            selectAs = / as /.test(match[0]) && match[1],
+            selectAsFn = selectAs ? $parse(selectAs) : null,
             keyName = match[5],
             groupByFn = $parse(match[3] || ''),
             valueFn = $parse(match[2] ? match[1] : valueName),
@@ -336,7 +346,27 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
             // We try to reuse these if possible
             // - optionGroupsCache[0] is the options with no option group
             // - optionGroupsCache[?][0] is the parent: either the SELECT or OPTGROUP element
-            optionGroupsCache = [[{element: selectElement, label:''}]];
+            optionGroupsCache = [[{element: selectElement, label:''}]],
+            idFn, isSelected;
+
+        isSelected = function isSelected(selectedSet, modelValue, locals) {
+          var compareValueFn;
+          if (selectAsFn) {
+            compareValueFn = selectAsFn;
+          } else if (trackFn) {
+            compareValueFn = trackFn;
+          } else {
+            compareValueFn = valueFn;
+          }
+          var compareValue = compareValueFn(scope, locals);
+          if (multiple) {
+            return isDefined(
+              selectedSet.remove(compareValue)
+            );
+          } else {
+            return modelValue === compareValue;
+          }
+        };
 
         if (nullOption) {
           // compile the element since there might be bindings in it
@@ -437,7 +467,7 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
           var selectedSet = false;
           if (multiple) {
             var modelValue = ctrl.$modelValue;
-            if (trackFn && isArray(modelValue)) {
+            if (trackFn && isArray(modelValue) && !selectAs) {
               selectedSet = new HashMap([]);
               var locals = {};
               for (var trackIndex = 0; trackIndex < modelValue.length; trackIndex++) {
@@ -501,27 +531,16 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
               optionGroup = optionGroups[optionGroupName] = [];
               optionGroupNames.push(optionGroupName);
             }
-            if (multiple) {
-              selected = isDefined(
-                selectedSet.remove(trackFn ? trackFn(scope, locals) : valueFn(scope, locals))
-              );
-            } else {
-              if (trackFn) {
-                var modelCast = {};
-                modelCast[valueName] = modelValue;
-                selected = trackFn(scope, modelCast) === trackFn(scope, locals);
-              } else {
-                selected = modelValue === valueFn(scope, locals);
-              }
-              selectedSet = selectedSet || selected; // see if at least one item is selected
-            }
+
+            selected = isSelected(selectedSet, modelValue, locals);
+            selectedSet = selectedSet || selected;
             label = displayFn(scope, locals); // what will be seen by the user
 
             // doing displayFn(scope, locals) || '' overwrites zero values
             label = isDefined(label) ? label : '';
             optionGroup.push({
               // either the index into array or key from object
-              id: trackFn ? trackFn(scope, locals) : (keyName ? keys[index] : index),
+              id: (keyName ? keys[index] : index),
               label: label,
               selected: selected                   // determine if we should be selected
             });

test/ng/directive/selectSpec.js

@@ -591,6 +591,29 @@ describe('select', function() {
     });
 
 
+    it('should bind to scope value through expression while tracking/identifying objects', function() {
+      createSelect({
+        'ng-model': 'selected',
+        'ng-options': 'item.id as item.name for item in values track by item.trackId'
+      });
+
+      var selectedIdx;
+
+      scope.$apply(function() {
+        scope.values = [{id: 10, trackId: 100, name: 'A'}, {id: 20, trackId: 200, name: 'B'}];
+        scope.selected = 10;
+      });
+
+      expect(element.val()).toEqual('0');
+
+      scope.$apply(function() {
+        scope.selected = 20;
+      });
+
+      expect(element.val()).toEqual('1');
+    });
+
+
     it('should render a list', function() {
       createSingleSelect();
 
@@ -924,23 +947,23 @@ describe('select', function() {
                           {id: 2, name: 'second'},
                           {id: 3, name: 'third'},
                           {id: 4, name: 'forth'}];
-          scope.selected = {id: 2};
+          scope.selected = scope.values[1];
         });
 
-        expect(element.val()).toEqual('2');
+        expect(element.val()).toEqual('1');
 
         var first = jqLite(element.find('option')[0]);
         expect(first.text()).toEqual('first');
-        expect(first.attr('value')).toEqual('1');
+        expect(first.attr('value')).toEqual('0');
         var forth = jqLite(element.find('option')[3]);
         expect(forth.text()).toEqual('forth');
-        expect(forth.attr('value')).toEqual('4');
+        expect(forth.attr('value')).toEqual('3');
 
         scope.$apply(function() {
           scope.selected = scope.values[3];
         });
 
-        expect(element.val()).toEqual('4');
+        expect(element.val()).toEqual('3');
       });
 
 
@@ -1459,7 +1482,31 @@ describe('select', function() {
 
         expect(element.find('option')[0].selected).toEqual(false);
       });
-    });
+
+      it('should bind to scope with multiple:true while tracking/identifying objects with multiple',
+          function() {
+            createSelect({
+              'ng-model': 'selected',
+              'multiple': true,
+              'ng-options': 'item.id as item.name for item in values track by item.trackId'
+            });
+
+            var selectedIdx;
+
+            scope.$apply(function() {
+              scope.values = [{id: 10, trackId: 100, name: 'A'}, {id: 20, trackId: 200, name: 'B'}];
+              scope.selected = [10];
+            });
+
+            expect(element.val()).toEqual(['0']);
+
+            scope.$apply(function() {
+              scope.selected = [20];
+            });
+
+            expect(element.val()).toEqual(['1']);
+          });
+        });
 
 
     describe('ngRequired', function() {