AngularJs: How to call the angularjs function by Pressing tab button after entering text in the text box?

Question

I am wondering how to call the angularjs function by Pressing tab button?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
    
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

</div>

How to call the function using angularJs, after Pressing the firstName and click on tab button. since i am new to angularJs, i know ng-click,ng-change, but i got no idea about this.

please someone help me.

Thanks in advance

Answer 1

You could use ngBlur.

However, it will run the function if you click outside of the input as well as tabbing out.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
      
    $scope.tabbedout = function(val) {
      console.log("tabbedout: " + val);
    }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName" ng-blur="tabbedout(firstName)"><br>
Last Name: <input type="text" ng-model="lastName" ng-blur="tabbedout(lastName)"><br>

</div>

Answer 2

You say click a button, but I assume you want to handle the tab keydown/keyup events since there is no tab-button to click.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    var _this = this;
    _this.firstName = '';
    _this.handleKeyDown = function($event) {
        if ($event.which == 9)
            alert('tab was pressed! Current value is: ' + _this.firstName);
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl as vm">

First Name: <input type="text" ng-model="vm.firstName" ng-keydown="vm.handleKeyDown($event)"><br>

</div>