f[eat|ix](select): support values added by ngValue

benchmarks/select-ng-value-bp/app.js

@@ -0,0 +1,104 @@
+"use strict";
+
+/* globals angular, benchmarkSteps */
+
+var app = angular.module('selectBenchmark', []);
+
+app.config(function($compileProvider) {
+  if ($compileProvider.debugInfoEnabled) {
+    $compileProvider.debugInfoEnabled(false);
+  }
+});
+
+
+
+app.controller('DataController', function($scope, $element) {
+  $scope.groups = [];
+  $scope.count = 10000;
+
+  function changeOptions() {
+    $scope.groups = [];
+    var i = 0;
+    var group;
+    while(i < $scope.count) {
+      if (i % 100 === 0) {
+        group = {
+          name: 'group-' + $scope.groups.length,
+          items: []
+        };
+        $scope.groups.push(group);
+      }
+      group.items.push({
+        id: i,
+        label: 'item-' + i
+      });
+      i++;
+    }
+  }
+
+  var selectElement = $element.find('select');
+  console.log(selectElement);
+
+
+  benchmarkSteps.push({
+    name: 'add-options',
+    fn: function() {
+      $scope.$apply(function() {
+        $scope.count = 10000;
+        changeOptions();
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'set-model-1',
+    fn: function() {
+      $scope.$apply(function() {
+        $scope.x = $scope.groups[10].items[0];
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'set-model-2',
+    fn: function() {
+      $scope.$apply(function() {
+        $scope.x = $scope.groups[0].items[10];
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'remove-options',
+    fn: function() {
+      $scope.count = 100;
+      changeOptions();
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'add-options',
+    fn: function() {
+      $scope.$apply(function() {
+        $scope.count = 10000;
+        changeOptions();
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'set-view-1',
+    fn: function() {
+      selectElement.val('2000');
+      selectElement.triggerHandler('change');
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'set-view-2',
+    fn: function() {
+      selectElement.val('1000');
+      selectElement.triggerHandler('change');
+    }
+  });
+});

benchmarks/select-ng-value-bp/bp.conf.js

@@ -0,0 +1,11 @@
+module.exports = function(config) {
+  config.set({
+    scripts: [    {
+      id: 'angular',
+      src: '/build/angular.js'
+    },
+    {
+      src: 'app.js',
+    }]
+  });
+};

benchmarks/select-ng-value-bp/main.html

@@ -0,0 +1,15 @@
+<div ng-app="selectBenchmark" ng-cloak>
+  <div ng-controller="DataController">
+    <div class="container-fluid">
+      <p>
+        Tests the execution of a select with ngRepeat'ed options with ngValue for rendering during model
+        and option updates.
+      </p>
+      <select ng-model="x">
+        <optgroup ng-repeat="g in groups track by g.name" label="{{g.name}}">
+          <option ng-repeat="a in g.items track by a.id" ng-value="a">{{a.label}}</option>
+        </optgroup>
+      </select>
+    </div>
+  </div>
+</div>

src/ng/directive/input.js

@@ -1743,10 +1743,8 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
  * `ngValue` is useful when dynamically generating lists of radio buttons using
  * {@link ngRepeat `ngRepeat`}, as shown below.
  *
- * Likewise, `ngValue` can be used to generate `<option>` elements for
- * the {@link select `select`} element. In that case however, only strings are supported
- * for the `value `attribute, so the resulting `ngModel` will always be a string.
- * Support for `select` models with non-string values is available via `ngOptions`.
+ * Likewise, `ngValue` can be used to set the value of `<option>` elements for
+ * the {@link select `select`} element.
  *
  * @element input
  * @param {string=} ngValue angular expression, whose value will be bound to the `value` attribute

src/ng/directive/ngOptions.js

@@ -15,13 +15,12 @@ var ngOptionsMinErr = minErr('ngOptions');
  * elements for the `<select>` element using the array or object obtained by evaluating the
  * `ngOptions` comprehension expression.
  *
- * In many cases, `ngRepeat` can be used on `<option>` elements instead of `ngOptions` to achieve a
- * similar result. However, `ngOptions` provides some benefits such as reducing memory and
- * increasing speed by not creating a new scope for each repeated instance, as well as providing
- * more flexibility in how the `<select>`'s model is assigned via the `select` **`as`** part of the
- * comprehension expression. `ngOptions` should be used when the `<select>` model needs to be bound
- *  to a non-string value. This is because an option element can only be bound to string values at
- * present.
+ * In many cases, `ngRepeat` can be used on `<option>` elements instead of {@link ng.directive:ngOptions
+ * ngOptions} to achieve a similar result. However, `ngOptions` provides some benefits:
+ * - more flexibility in how the `<select>`'s model is assigned via the `select` **`as`** part of the
+ * comprehension expression
+ * - reduced memory consumption by not creating a new scope for each repeated instance
+ * - increased render speed by creating the options in a documentFragment instead of individually
  *
  * When an item in the `<select>` menu is selected, the array element or object property
  * represented by the selected option will be bound to the model identified by the `ngModel`