Ng-Focus-6

 

In this example of Ng-Focus, We will show the div if user focus on the anchor. Are you want to proceed.



See the code:

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app=""> <div class="container"> <h3>Ng-Focus</h3> <a href="javascript:void(0)" ng-focus="isCheck=true">Are you want to proceed.</a><br /><br /> <div class="row" ng-show="isCheck"> <div class="col-md-6"> <div class="row"> <label class="col-md-4">First Name</label> <div class="col-md-8"> <input type="text" ng-focus="isCheck=true" class="form-control" /> </div> </div> </div> <div class="col-md-6"> <div class="row"> <label class="col-md-4">Last Name</label> <div class="col-md-8"> <input type="text" ng-focus="isCheck=true" class="form-control" /> </div> </div> </div> </div> <h3 ng-show="isCheck">Ng-Focus <i style="color:red">{{isCheck}}</i></h3> </div> </body> </html>
Output