Ng-Focus-5

 

In this example of Ng-Focus, Multiple textboxes with on-focus directive. 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"> <style> .focus { border-left: 5px solid green !important; background-color: lightgreen; } </style> </head> <body ng-app=""> <div class="container"> <div ng-init="Array = ['LearnKode-1','LearnKode-2','LearnKode-3']"> <h3>Ng-Focus</h3> <div ng-repeat="array in Array"> <input type="text" class="form-control" ng-model="array" autofocus ng-class="{true:'focus',false:'blur'}[isFocused]" ng-focus="isFocused=true" ng-blur="isFocused=false"> <span ng-show="isFocused"><b>{{array}}</b></span> <br /> </div> </div> </div> </body> </html>
Output