CODEWITHSUNDEEP
angularjs
anastsiacrs
anastsiacrs

Reputation: 159

AngularJS: Debounce. Fire changes to apply on click

There are input with debounce, 'clear' btn (to clear input) and 'use' btn (to use input value). :

<input ng-model="*"  ng-model-options="{ debounce: 1000 }" />

For proper 'clear' btn work $rollbackViewValue() is used (here)

<button ng-click='formname.$rollbackViewValue();vm.clear()' />

But what approach can be used for 'use' btn? How fire changes to apply on click (before debounce interval will be ended)?

Upvotes: 2

Views: 3216

Answers (2)

vorant
vorant

Reputation: 708

For 'use btn' use $commitViewValue()

<button ng-click="userForm.userName.$commitViewValue(); setValue()">setValue</button>

Just example

<form name="userForm">
    <label>Name:
        <input type="text" name="userName"
            ng-model="user.name"
            ng-model-options="{ debounce: 1000 }" />
    </label>
    <button ng-click="userForm.userName.$commitViewValue(); setValue()">setValue</button>

    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
    <br />
</form>

Demo http://plnkr.co/edit/EwaNsCcfa72sdnK3REgY?p=preview

Upvotes: 3

Bas Slagter
Bas Slagter

Reputation: 9929

You can be more specific with your model options:

<input ng-model="*"  ng-model-options="{ debounce: { 'default': 1000, 'blur': 0 } }" />

That way, when you click the button, the debounce timeout should be zero since you loose focus on the input element.

Upvotes: 0

Related Questions