diff --git a/src/ng/directive/ngOptions.js b/src/ng/directive/ngOptions.js index 282dff3aedd2..17bed2b47329 100644 --- a/src/ng/directive/ngOptions.js +++ b/src/ng/directive/ngOptions.js @@ -58,17 +58,13 @@ var ngOptionsMinErr = minErr('ngOptions'); * ### `select` **`as`** and **`track by`** * *
- * Do not use `select` **`as`** and **`track by`** in the same expression. They are not designed to work together. + * Be careful when using `select` **`as`** and **`track by`** in the same expression. *
* - * Consider the following example: - * - * ```html - * - * ``` + * Given this array of items on the $scope: * * ```js - * $scope.values = [{ + * $scope.items = [{ * id: 1, * label: 'aLabel', * subItem: { name: 'aSubItem' } @@ -77,20 +73,32 @@ var ngOptionsMinErr = minErr('ngOptions'); * label: 'bLabel', * subItem: { name: 'bSubItem' } * }]; + * ``` * - * $scope.selected = { name: 'aSubItem' }; + * This will work: + * + * ```html + * * ``` + * ```js + * $scope.selected = $scope.items[0]; + * ``` + * + * but this will not work: * - * With the purpose of preserving the selection, the **`track by`** expression is always applied to the element - * of the data source (to `item` in this example). To calculate whether an element is selected, we do the - * following: + * ```html + * + * ``` + * ```js + * $scope.selected = $scope.items[0].subItem; + * ``` * - * 1. Apply **`track by`** to the elements in the array. In the example: `[1, 2]` - * 2. Apply **`track by`** to the already selected value in `ngModel`. - * In the example: this is not possible as **`track by`** refers to `item.id`, but the selected - * value from `ngModel` is `{name: 'aSubItem'}`, so the **`track by`** expression is applied to - * a wrong object, the selected element can't be found, `` + * always appears to be unselected. * * * @param {string} ngModel Assignable angular expression to data-bind to.