Ng-Focus Examples - LearnKode

Description :

In this example of Ng-Focus, Anchor will redirect user to learnkode.com using the function below: $scope.url = function () { window.location = 'http://learnkode.com'; } HTML: LearnKode URL:LearnKode

Ng-Focus Example - 1

<!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="myApp">
    <div ng-controller="LearnItController">
        <div class="container">
            LearnKode URL:<a href="javascript:void(0)" ng-focus="url()"><b>LearnKode</b></a>
        </div>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller('LearnItController', ['$scope', function ($scope) {
        $scope.url = function () {
            window.location = 'http://learnkode.com';
        }
    }]);
</script>
</body>
</html>

Try it » Download Example »

Output

Description :

In this example of Ng-Focus, We will set the border of textbox to true or false on focus of textboxes and do the calculation part. See the code below:

Ng-Focus Example - 2

<!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="myApp">
    <div ng-controller="myController">
        <div class="container">
            <label>field1:</label>
            <input name="focusField1" class="form-control" ng-class="{true:'border',false:''}[focusField1]" ng-model="value1" ng-focus="focusField1=true;focusField2=false" />
            <label>field2:</label>                                                                         
            <input name="focusField2" class="form-control" ng-class="{true:'border',false:''}[focusField2]" ng-model="value2" ng-focus="focusField2=true;focusField1=false" />
            Focus from <b>{{focusField1==true?"Field1":"Field2"}}</b>: {{focusField1==true?value1:value2}} * {{focusField1==true?value2:value1}} = {{value1*value2}}<br />
        </div>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.value1 = 2;
        $scope.value2 = 4;
    }]);
</script>

<style>
    .border {
        border-color: skyblue !important;
        border-left: 5px solid red !important;
    }
</style>
</body>
</html>

Try it » Download Example »

Output

Description :

In this example of Ng-Focus, We are setting focused variable to true on focus and false on blur of textbox. See the code

Ng-Focus Example - 3

<!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="myApp">
    <div ng-controller="myController">
        <div class="container">
            Focus me <input class="form-control" type="text" ng-focus="focused = true" ng-blur="focused = false" />
            <pre ng-show="focused">I'm focused</pre>
        </div>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>

Try it » Download Example »

Output

Description :

Example of Ng-Focus, in this we added class on focus and on blur. See the code below:

Ng-Focus Example - 4

<!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>
    .myFocus {
        background-color: lightgreen;
    }

    .blur {
        background-color: pink;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div class="container">
            Ng-Focus:  <input class="form-control" type="text" ng-class="{true:'myFocus',false:'blur' }[focus]" ng-focus="focus=true" ng-blur="focus=false">
            Focus: {{focus}}
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {

    }]);
</script>
</body>
</html>

Try it » Download Example »

Output

Description :

In this example of Ng-Focus, Multiple textboxes with on-focus directive. See the code:

Ng-Focus Example - 5

<!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>

Try it » Download Example »

Output

Description :

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:

Ng-Focus Example - 6

<!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>

Try it » Download Example »

Output

Description :

Ng-Focus-7

Ng-Focus Example - 7

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ctrlName">
        <div class="container">
            <h3>Ng-Focus</h3>
            <input type="date" class="form-control" ng-model="dt" ng-focus="displayDate()" ng-blur="hideDate()" /><br />
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('ctrlName', ['$scope', function ($scope) {
            $scope.displayDate = function () {
                $scope.dt = new Date();
            };
            $scope.hideDate = function () {
                $scope.dt = null;
            };
        }]);
    </script>
</body>
</html>

Try it » Download Example »

Output

Description :

Ng-Focus-8

Ng-Focus Example - 8

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <h3>Ng-Focus</h3>
        <textarea class="form-control" ng-style="style" ng-model="dt" ng-focus="style={'height':'200px'}" ng-blur="style={}"></textarea><br />
    </div>
</body>
</html>

Try it » Download Example »

8 Example(s) of Ng-Focus

Output

Output

Output

Output

Output

Output

Output

Output