Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 01dd588

Browse files
committed
docs(select): tweak description and add examples
- Change some wordings to make them more understandable - Reorder the paragraphs so they can be read more easily as a coherent text - Add examples for static single / multiple selects, and non-selected option - Add example for select with repeated options - Remove form-related info from ngOptions select (doesn't apply)
1 parent 3d6dc3f commit 01dd588

File tree

1 file changed

+116
-35
lines changed

1 file changed

+116
-35
lines changed

src/ng/directive/select.js

+116-35
Original file line numberDiff line numberDiff line change
@@ -108,39 +108,131 @@ var SelectController =
108108
* @description
109109
* HTML `SELECT` element with angular data-binding.
110110
*
111-
* The `select` directive provides support for {@link ngModel.NgModelController NgModelController} to
112-
* read and write the selected value(s) of the '<select>' control (including the default value) and
113-
* coordinates dynamically added `<option>` elements, which can be added using the `ngRepeat` or
114-
* 'ngOptions' directive.
111+
* The `select` directive is used together with {@link ngModel `ngModel`} to provide data-binding
112+
* between the scope and the `<select>` control (including setting default values).
113+
* Ìt also handles dynamic `<option>` elements, which can be added using the {@link ngRepeat `ngRepeat}` or
114+
* {@link ngOptions `ngOptions`} directives.
115115
*
116-
* @param {string} ngModel Assignable angular expression to data-bind to. Also used to set the default
117-
* value of the select by assigning the desired value to this model in scope.
116+
* When an item in the `<select>` menu is selected, the value of the selected option will be bound
117+
* to the model identified by the `ngModel` directive. With static or repeated options, this is
118+
* the content of the `value` attribute or the textContent of the `<option>`, if the value attribute is missing.
119+
* If you want dynamic value attributes, you can use interpolation inside the value attribute.
120+
*
121+
* <div class="alert alert-warning">
122+
* Note that the value of a `select` directive used without `ngOptions` is always a string.
123+
* When the model needs to be bound to a non-string value, you must either explictly convert it
124+
* using a directive (see example below) or use `ngOptions` to specify the set of options.
125+
* This is because an option element can only be bound to string values at present.
126+
* </div>
127+
*
128+
* If the viewValue of `ngModel` does not match any of the options, then the control
129+
* will automatically add an "unknown" option, which it then removes when the mismatch is resolved.
130+
*
131+
* Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can
132+
* be nested into the `<select>` element. This element will then represent the `null` or "not selected"
133+
* option. See example below for demonstration.
134+
*
135+
* <div class="alert alert-info">
136+
* In many cases, `ngRepeat` can be used on `<option>` elements instead of {@link ng.directive:ngOptions
137+
* ngOptions} to achieve a similar result. However, `ngOptions` provides some benefits, such as
138+
* more flexibility in how the `<select>`'s model is assigned via the `select` **`as`** part of the
139+
* comprehension expression, and additionally in reducing memory and increasing speed by not creating
140+
* a new scope for each repeated instance.
141+
* </div>
142+
*
143+
*
144+
* @param {string} ngModel Assignable angular expression to data-bind to.
118145
* @param {string=} name Property name of the form under which the control is published.
119146
* @param {string=} required Sets `required` validation error key if the value is not entered.
120-
* @param {boolean=} ngRequired Sets `required` attribute if set to true
147+
* @param {string=} ngRequired Adds required attribute and required validation constraint to
148+
* the element when the ngRequired expression evaluates to true. Use ngRequired instead of required
149+
* when you want to data-bind to the required attribute.
121150
* @param {string=} ngChange Angular expression to be executed when selected option(s) changes due to user
122151
* interaction with the select element.
123-
* @param {string=} ngOptions sets the options that the select is populated with. Alternatively the options
124-
* can be added with the '<option>' and the 'ngRepeat' directive.
152+
* @param {string=} ngOptions sets the options that the select is populated with and defines what is
153+
* set on the model on selection. See {@link ngOptions `ngOptions`}.
125154
*
126-
* In many cases, `ngRepeat` can be used on `<option>` elements instead of {@link ng.directive:ngOptions
127-
* ngOptions} to achieve a similar result. However, `ngOptions` provides some benefits such as reducing
128-
* memory and increasing speed by not creating a new scope for each repeated instance, as well as providing
129-
* more flexibility in how the `<select>`'s model is assigned via the `select` **`as`** part of the
130-
* comprehension expression.
155+
* @example
156+
* ### Simple `select` elements with static options
131157
*
132-
* When an item in the `<select>` menu is selected, the array element or object property
133-
* represented by the selected option will be bound to the model identified by the `ngModel`
134-
* directive.
158+
* <example name="static-select" module="staticSelect">
159+
* <file name="index.html">
160+
* <div ng-controller="ExampleController">
161+
* <form name="myForm">
162+
* <label for="singleSelect"> Single select: </label><br>
163+
* <select name="singleSelect" ng-model="data.singleSelect">
164+
* <option value="option-1">Option 1</option>
165+
* <option value="option-2">Option 2</option>
166+
* </select><br>
135167
*
136-
* If the viewValue contains a value that doesn't match any of the options then the control
137-
* will automatically add an "unknown" option, which it then removes when this is resolved.
168+
* <label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
169+
* <select name="singleSelect" ng-model="data.singleSelect">
170+
* <option value="">---Please select---</option> <!-- not selected / blank option -->
171+
* <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
172+
* <option value="option-2">Option 2</option>
173+
* </select><br>
174+
* <button ng-click="forceUnknownOption()">Force unknown option</button><br>
175+
* <tt>singleSelect = {{data.singleSelect}}</tt>
138176
*
139-
* Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can
140-
* be nested into the `<select>` element. This element will then represent the `null` or "not selected"
141-
* option. See example below for demonstration.
177+
* <hr>
178+
* <label for="multipleSelect"> Multiple select: </label><br>
179+
* <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
180+
* <option value="option-1">Option 1</option>
181+
* <option value="option-2">Option 2</option>
182+
* <option value="option-3">Option 3</option>
183+
* </select><br>
184+
* <tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
185+
* </form>
186+
* </div>
187+
* </file>
188+
* <file name="app.js">
189+
* angular.module('staticSelect', [])
190+
* .controller('ExampleController', ['$scope', function($scope) {
191+
* $scope.data = {
192+
* singleSelect: null,
193+
* multipleSelect: [],
194+
* option1: 'option-1',
195+
* };
142196
*
143-
* ### Example use of select with default value set
197+
* $scope.forceUnknownOption = function() {
198+
* $scope.data.singleSelect = 'nonsense';
199+
* };
200+
* }]);
201+
* </file>
202+
*</example>
203+
*
204+
* ### Using `ngRepeat` to generate `select` options
205+
* <example name="ngrepeat-select" module="ngrepeatSelect">
206+
* <file name="index.html">
207+
* <div ng-controller="ExampleController">
208+
* <form name="myForm">
209+
* <label for="repeatSelect"> Repeat select: </label>
210+
* <select name="repeatSelect" ng-model="data.repeatSelect">
211+
* <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
212+
* </select>
213+
* </form>
214+
* <hr>
215+
* <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
216+
* </div>
217+
* </file>
218+
* <file name="app.js">
219+
* angular.module('ngrepeatSelect', [])
220+
* .controller('ExampleController', ['$scope', function($scope) {
221+
* $scope.data = {
222+
* singleSelect: null,
223+
* availableOptions: [
224+
* {id: '1', name: 'Option A'},
225+
* {id: '2', name: 'Option B'},
226+
* {id: '3', name: 'Option C'}
227+
* ],
228+
* };
229+
* }]);
230+
* </file>
231+
*</example>
232+
*
233+
*
234+
* ### Using `select` with `ngOptions` and setting a default value
235+
* See the {@link ngOptions ngOptions documentation} for more `ngOptions` usage examples.
144236
*
145237
* <example name="select-with-default-values" module="defaultValueSelect">
146238
* <file name="index.html">
@@ -153,10 +245,6 @@ var SelectController =
153245
* </form>
154246
* <hr>
155247
* <tt>option = {{data.selectedOption}}</tt><br/>
156-
* <tt>myForm.mySelect.$valid = {{myForm.mySelect.$valid}}</tt><br/>
157-
* <tt>myForm.mySelect.$error = {{myForm.mySelect.$error}}</tt><br/>
158-
* <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
159-
* <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
160248
* </div>
161249
* </file>
162250
* <file name="app.js">
@@ -175,14 +263,7 @@ var SelectController =
175263
*</example>
176264
*
177265
*
178-
* <div class="alert alert-info">
179-
* The value of a `select` directive used without `ngOptions` is always a string.
180-
* When the model needs to be bound to a non-string value, you must either explictly convert it
181-
* using a directive (see example below) or use `ngOptions` to specify the set of options.
182-
* This is because an option element can only be bound to string values at present.
183-
* </div>
184-
*
185-
* ### Example (binding `select` to a non-string value)
266+
* ### Binding `select` to a non-string value via `ngModel` parsing / formatting
186267
*
187268
* <example name="select-with-non-string-options" module="nonStringSelect">
188269
* <file name="index.html">

0 commit comments

Comments
 (0)