@@ -15,34 +15,37 @@ var ngOptionsMinErr = minErr('ngOptions');
15
15
* elements for the `<select>` element using the array or object obtained by evaluating the
16
16
* `ngOptions` comprehension_expression.
17
17
*
18
+ * In many cases, `ngRepeat` can be used on `<option>` elements instead of `ngOptions` to achieve a
19
+ * similar result. However, the `ngOptions` provides some benefits such as reducing memory and
20
+ * increasing speed by not creating a new scope for each repeated instance, as well as providing
21
+ * more flexibility in how the `select`'s model is assigned via `select as`. `ngOptions should be
22
+ * used when the `select` model needs to be bound to a non-string value. This is because an option
23
+ * element can only be bound to string values at present.
24
+ *
18
25
* When an item in the `<select>` menu is selected, the array element or object property
19
26
* represented by the selected option will be bound to the model identified by the `ngModel`
20
27
* directive.
21
28
*
22
- * <div class="alert alert-warning">
23
- * **Note:** `ngModel` compares by reference, not value. This is important when binding to an
24
- * array of objects. See an example [in this jsfiddle](http://jsfiddle.net/qWzTb/).
25
- * </div>
26
- *
27
29
* Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can
28
30
* be nested into the `<select>` element. This element will then represent the `null` or "not selected"
29
31
* option. See example below for demonstration.
30
32
*
31
33
* <div class="alert alert-warning">
32
- * **Note:** `ngOptions` provides an iterator facility for the `<option>` element which should be used instead
33
- * of {@link ng.directive:ngRepeat ngRepeat} when you want the
34
- * `select` model to be bound to a non-string value. This is because an option element can only
35
- * be bound to string values at present.
34
+ * **Note:** `ngModel` compares by reference, not value. This is important when binding to an
35
+ * array of objects. See an example [in this jsfiddle](http://jsfiddle.net/qWzTb/).
36
36
* </div>
37
37
*
38
- * <div class="alert alert-info">
39
- * **Note:** Using `select as` will bind the result of the `select as` expression to the model, but
38
+ * ## `select as`
39
+ *
40
+ * Using `select as` will bind the result of the `select as` expression to the model, but
40
41
* the value of the `<select>` and `<option>` html elements will be either the index (for array data sources)
41
- * or property name (for object data sources) of the value within the collection.
42
- * </div>
42
+ * or property name (for object data sources) of the value within the collection. If a `track by` expression
43
+ * is used, the result of that expression will be set as the value of the `option` and `select` elements.
44
+ *
45
+ * ### `select as` with `trackexpr`
46
+ *
47
+ * Using `select as` together with `trackexpr` is not recommended. Reasoning:
43
48
*
44
- * **Note:** Using `select as` together with `trackexpr` is not recommended.
45
- * Reasoning:
46
49
* - Example: <select ng-options="item.subItem as item.label for item in values track by item.id" ng-model="selected">
47
50
* values: [{id: 1, label: 'aLabel', subItem: {name: 'aSubItem'}}, {id: 2, label: 'bLabel', subItem: {name: 'bSubItem'}}],
48
51
* $scope.selected = {name: 'aSubItem'};
0 commit comments