@@ -108,39 +108,131 @@ var SelectController =
108
108
* @description
109
109
* HTML `SELECT` element with angular data-binding.
110
110
*
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 .
115
115
*
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.
118
145
* @param {string= } name Property name of the form under which the control is published.
119
146
* @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.
121
150
* @param {string= } ngChange Angular expression to be executed when selected option(s) changes due to user
122
151
* 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`} .
125
154
*
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
131
157
*
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>
135
167
*
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>
138
176
*
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
+ * };
142
196
*
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.
144
236
*
145
237
* <example name="select-with-default-values" module="defaultValueSelect">
146
238
* <file name="index.html">
@@ -153,10 +245,6 @@ var SelectController =
153
245
* </form>
154
246
* <hr>
155
247
* <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/>
160
248
* </div>
161
249
* </file>
162
250
* <file name="app.js">
@@ -175,14 +263,7 @@ var SelectController =
175
263
*</example>
176
264
*
177
265
*
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
186
267
*
187
268
* <example name="select-with-non-string-options" module="nonStringSelect">
188
269
* <file name="index.html">
0 commit comments