0

I have the following plunker http://plnkr.co/edit/wYzXkL2VEpJIYGv353tn?p=preview

If you click on Open Modal, you will see 3 input fields. 1st one is autocomplete input box named 'Select State'. 2nd is the dropdown named 'RestName' and 3rd is the input field named 'Name'

I want to do the following. if user starts typing 'a' at input field of 'Select Name', a autocomplete values pop up. Its values poped up are 'Alabama, Alaska, Arizona'

Please note. As user types 'a', the 'Name' input field updates as 'Rick' straight away. It is because of this function here....

$scope.get_change = function(value) {
  $scope.selectedState = value;
  $scope.updatedName = 'rick';
}

Instead of updating directly on watever value we typed, i want to update 'Name' value only after the user leaves the first input box. i.e. on blur or something like that.

I tried to use a directive where ng-change occurs only when user blurred out of that 1st input field. The updates work fine if we use the directive. The autocomplete feature stops working if i use this directive...

Can someone please let me know how to update 'Name' after user has exited the 1st input field and not on when user is typing value at 1st input field.....

Akanksha Iyer
  • 129
  • 2
  • 4
  • 7

1 Answers1

0

You should consider ng-model-options. 

<label>Name:
      <input type="text" name="userName"
             ng-model="user.name"
             ng-model-options="{ updateOn: 'blur' }"
             ng-keyup="cancel($event)" />
</label><br />

Source: https://docs.angularjs.org/api/ng/directive/ngModelOptions

defaultcheckbox
  • 739
  • 2
  • 5
  • 16