Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/\*\*
- @ngdoc directive
- @name ngModelOptions
- @restrict A
- @priority 10
-
- @description
- This directive allows you to modify the behaviour of {@link ngModel} directives within your
- application. You can specify an `ngModelOptions` directive on any element. All {@link ngModel}
- directives will use the options of their nearest `ngModelOptions` ancestor.
-
- The `ngModelOptions` settings are found by evaluating the value of the attribute directive as
- an AngularJS expression. This expression should evaluate to an object, whose properties contain
- the settings. For example: `
-
-
- ```
```
-
- the `input` element will have the following settings
-
- ```js
```
- { allowInvalid: true, updateOn: 'default', debounce: 0 }
- ```
```
-
- Notice that the `debounce` setting was not inherited and used the default value instead.
-
- You can specify that all undefined settings are automatically inherited from an ancestor by
- including a property with key of `"*"` and value of `"$inherit"`.
-
- For example given the following fragment of HTML
-
-
- ```html
```
-
-
-
- ```
```
-
- the `input` element will have the following settings
-
- ```js
```
- { allowInvalid: true, updateOn: 'default', debounce: 200 }
- ```
```
-
- Notice that the `debounce` setting now inherits the value from the outer `
` element.
-
- If you are creating a reusable component then you should be careful when using `"*": "$inherit"`
- since you may inadvertently inherit a setting in the future that changes the behavior of your component.
-
-
- ## Triggering and debouncing model updates
-
- The `updateOn` and `debounce` properties allow you to specify a custom list of events that will
- trigger a model update and/or a debouncing delay so that the actual update only takes place when
- a timer expires; this timer will be reset after another change takes place.
-
- Given the nature of `ngModelOptions`, the value displayed inside input fields in the view might
- be different from the value in the actual model. This means that if you update the model you
- should also invoke {@link ngModel.NgModelController#$rollbackViewValue} on the relevant input field in
- order to make sure it is synchronized with the model and that any debounced action is canceled.
-
- The easiest way to reference the control's {@link ngModel.NgModelController#$rollbackViewValue}
- method is by making sure the input is placed inside a form that has a `name` attribute. This is
- important because `form` controllers are published to the related scope under the name in their
- `name` attribute.
-
- Any pending changes will take place immediately when an enclosing form is submitted via the
- `submit` event. Note that `ngClick` events will occur before the model is updated. Use `ngSubmit`
- to have access to the updated model.
-
- ### Overriding immediate updates
-
- The following example shows how to override immediate updates. Changes on the inputs within the
- form will update the model only when the control loses focus (blur event). If `escape` key is
- pressed while the input field is focused, the value is reset to the value in the current model.
-
- ### Debouncing updates
-
- The next example shows how to debounce model changes. Model will be updated only 1 sec after last change.
- If the `Clear` button is pressed, any debounced action is canceled and the value becomes empty.
-
- ### Default events, extra triggers, and catch-all debounce values
-
- This example shows the relationship between "default" update events and
- additional `updateOn` triggers.
-
- `default` events are those that are bound to the control, and when fired, update the `$viewValue`
- via {@link ngModel.NgModelController#$setViewValue $setViewValue}. Every event that is not listed
- in `updateOn` is considered a "default" event, since different control types have different
- default events.
-
- The control in this example updates by "default", "click", and "blur", with different `debounce`
- values. You can see that "click" doesn't have an individual `debounce` value -
- therefore it uses the `*` debounce value.
-
- There is also a button that calls {@link ngModel.NgModelController#$setViewValue $setViewValue}
- directly with a "custom" event. Since "custom" is not defined in the `updateOn` list,
- it is considered a "default" event and will update the
- control if "default" is defined in `updateOn`, and will receive the "default" debounce value.
- Note that this is just to illustrate how custom controls would possibly call `$setViewValue`.
-
- You can change the `updateOn` and `debounce` configuration to test different scenarios. This
- is done with {@link ngModel.NgModelController#$overrideModelOptions $overrideModelOptions}.
-
angular.module('optionsExample', [])
.component('modelUpdateDemo', {
templateUrl: 'template.html',
controller: function() {
this.name = 'Chinua';
this.options = {
updateOn: 'default blur click',
debounce: {
default: 2000,
blur: 0,
'*': 1000
}
};
this.updateEvents = function() {
let eventList = this.options.updateOn.split(' ');
eventList.push('*');
let events = {};
for (let i = 0; i < eventList.length; i++) {
events[eventList[i]] = this.options.debounce[eventList[i]];
}
this.events = events;
};
this.updateOptions = function() {
let options = angular.extend(this.options, {
updateOn: Object.keys(this.events).join(' ').replace('*', ''),
debounce: this.events
});
this.form.input.$overrideModelOptions(options);
};
// Initialize the event form
this.updateEvents();
}
});
Model: {{$ctrl.name}}
-
-
- ## Model updates and validation
-
- The default behaviour in `ngModel` is that the model value is set to `undefined` when the
- validation determines that the value is invalid. By setting the `allowInvalid` property to true,
- the model will still be updated even if the value is invalid.
-
-
- ## Connecting to the scope
-
- By setting the `getterSetter` property to true you are telling ngModel that the `ngModel` expression
- on the scope refers to a "getter/setter" function rather than the value itself.
-
- The following example shows how to bind to getter/setters:
-
-
-
-
-
-
user.name =
-
-
-
- angular.module('getterSetterExample', [])
- .controller('ExampleController', ['$scope', function($scope) {
- let _name = 'Brian';
- $scope.user = {
- name: function(newName) {
- return angular.isDefined(newName) ? (_name = newName) : _name;
- }
- };
- }]);
-
-
-
-
- ## Programmatically changing options
-
- The `ngModelOptions` expression is only evaluated once when the directive is linked; it is not
- watched for changes. However, it is possible to override the options on a single
- {@link ngModel.NgModelController} instance with
- {@link ngModel.NgModelController#$overrideModelOptions `NgModelController#$overrideModelOptions()`}.
- See also the example for
- {@link ngModelOptions#default-events-extra-triggers-and-catch-all-debounce-values
- Default events, extra triggers, and catch-all debounce values}.
-
-
- ## Specifying timezones
-
- You can specify the timezone that date/time input directives expect by providing its name in the
- `timezone` property.
-
-
- ## Formatting the value of `time` and `datetime-local`
-
- With the options `timeSecondsFormat` and `timeStripZeroSeconds` it is possible to adjust the value
- that is displayed in the control. Note that browsers may apply their own formatting
- in the user interface.
-
angular.module('timeExample', [])
.component('timeExample', {
templateUrl: 'timeExample.html',
controller: function() {
this.time = new Date(1970, 0, 1, 14, 57, 0);
this.options = {
timeSecondsFormat: 'ss',
timeStripZeroSeconds: true
};
this.optionChange = function() {
this.timeForm.timeFormatted.$overrideModelOptions(this.options);
this.time = new Date(this.time);
};
}
});
-
-
- @param {Object} ngModelOptions options to apply to {@link ngModel} directives on this element and
- and its descendents.
-
- **General options**:
-
- - `updateOn`: string specifying which event should the input be bound to. You can set several
- events using an space delimited list. There is a special event called `default` that
- matches the default events belonging to the control. These are the events that are bound to
- the control, and when fired, update the `$viewValue` via `$setViewValue`.
-
- `ngModelOptions` considers every event that is not listed in `updateOn` a "default" event,
- since different control types use different default events.
-
- See also the section {@link ngModelOptions#triggering-and-debouncing-model-updates
- Triggering and debouncing model updates}.
-
- - `debounce`: integer value which contains the debounce model update value in milliseconds. A
- value of 0 triggers an immediate update. If an object is supplied instead, you can specify a
- custom value for each event. For example:
- ```
- ng-model-options="{
- updateOn: 'default blur',
- debounce: { 'default': 500, 'blur': 0 }
- }"
- ```
- You can use the `*` key to specify a debounce value that applies to all events that are not
- specifically listed. In the following example, `mouseup` would have a debounce delay of 1000:
- ```
- ng-model-options="{
- updateOn: 'default blur mouseup',
- debounce: { 'default': 500, 'blur': 0, '*': 1000 }
- }"
- ```
- - `allowInvalid`: boolean value which indicates that the model can be set with values that did
- not validate correctly instead of the default behavior of setting the model to undefined.
- - `getterSetter`: boolean value which determines whether or not to treat functions bound to
- `ngModel` as getters/setters.
-
-
- **Input-type specific options**:
-
- - `timezone`: Defines the timezone to be used to read/write the `Date` instance in the model for
- ``, ``, ... . It understands UTC/GMT and the
- continental US time zone abbreviations, but for general use, use a time zone offset, for
- example, `'+0430'` (4 hours, 30 minutes east of the Greenwich meridian)
- If not specified, the timezone of the browser will be used.
- Note that changing the timezone will have no effect on the current date, and is only applied after
- the next input / model change.
-
- - `timeSecondsFormat`: Defines if the `time` and `datetime-local` types should show seconds and
- milliseconds. The option follows the format string of {@link date date filter}.
- By default, the options is `undefined` which is equal to `'ss.sss'` (seconds and milliseconds).
- The other options are `'ss'` (strips milliseconds), and `''` (empty string), which strips both
- seconds and milliseconds.
- Note that browsers that support `time` and `datetime-local` require the hour and minutes
- part of the time string, and may show the value differently in the user interface.
- {@link ngModelOptions#formatting-the-value-of-time-and-datetime-local- See the example}.
-
- - `timeStripZeroSeconds`: Defines if the `time` and `datetime-local` types should strip the
- seconds and milliseconds from the formatted value if they are zero. This option is applied
- after `timeSecondsFormat`.
- This option can be used to make the formatting consistent over different browsers, as some
- browsers with support for `time` will natively hide the milliseconds and
- seconds if they are zero, but others won't, and browsers that don't implement these input
- types will always show the full string.
- {@link ngModelOptions#formatting-the-value-of-time-and-datetime-local- See the example}.
- \*/
