8 Example(s) of Ng-Blur


Description :

In this example of Ng-Blur, We have a textbox with ng-blur that will increment the count and set the isBlur variable to true. Based on the the on blur the textbox color will be changed. See the output


Ng-Blur 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">
<style>
    .blur {
        background-color: skyblue;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="LearnKode">
        <div class="container">
            <p>Name: <input class="form-control" ng-model="blur" type="text" ng-class="{blur:isBlur}" ng-focus="isBlur=false;blur='Ng-Blur False'" ng-blur="count1=count1+1;ngBlur();isBlur=true" /></p>
            <p>Age <input class="form-control"  type="text" /></p>
            <p>Total count {{count1}}</p>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', function ($scope) {
        $scope.ngBlur = function () {
            $scope.isBlur = true;
            $scope.blur = "Ng-Blur True";
        }
    }]);
</script>
</body>
</html>

Output

Description :

Example of Ng-Blur


Ng-Blur 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">
<style>
    .myBlur {
        background-color: lightskyblue;
    }
    .myFocus {
        border-left: 5px solid;
    }
</style>
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnKode">
            <h3>Ng-Blur</h3>
            <input ng-model="msg" class="form-control" type="text" ng-class="{ myFocus: focus, myBlur: blur }" ng-focus="focus=true;blur=false;" ng-blur="ngBlur()" />
            <p>{{msg}}</p>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', '$timeout', function ($scope, $timeout) {
        $scope.msg = "LearnKode";
        $scope.ngBlur = function () {
            $scope.clicked = false;
            $timeout(function () {
                if ($scope.clicked) {
                    return;
                }
                $scope.blur = true;
                $scope.focus = false;
                $scope.msg = $scope.msg + ' *Ng-Blur* ';
            })
        }
    }]);
</script>
</body>
</html>

Output

Description :

Example of Ng-Blur


Ng-Blur 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="app">
    <div class="container">
        <div ng-controller="LearnKode">
            User Name: <input class="form-control" type="text" ng-blur="userName=false" ng-focus="userName=true">
            <span style="color:red" ng-show="userName">Input your User name</span><br />
            Password: <input class="form-control" type="text" ng-blur="password=false" ng-focus="password=true">
            <span style="color:red" ng-hide="!password">Input your Password</span>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', function ($scope) {

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

Output

Description :

In this example of Ng-Blur, We have added a checkbox and onblur of checkbox, it will show alert box with some message$scope.alert = function () { alert("This Check box field has lost its focus."); } See the output


Ng-Blur 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">
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnKode">
            <div class="row">
                <label class="col-md-2">Admin:</label>
                <div class="col-md-2">
                    <input type="checkbox" ng-blur="alert()">
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', function ($scope) {
        $scope.alert = function () {
            alert("This Check box field has lost its focus.");
        }
    }]);
</script>
</body>
</html>

Output

Description :

In this example, We have added ng-focus on radiobuttons one is for male and another one is for female. See the code


Ng-Blur 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>
    .blur {
        color: white;
        border-radius: 3px;
        background-color: maroon;
        padding: 8px;
        margin: 8px;
    }
</style>
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnKode"><br />
            <div class="row" ng-init="male='Male';isMaleBlur=true">
                <label class="col-md-2">Gender :</label>
                <div class="col-md-2">
                    Male <input type="radio" name="blur" ng-focus="isMaleBlur=true" value="Male" ng-model="male">
                    Female <input type="radio" name="blur" ng-focus="isMaleBlur=false" value="Female" ng-model="female">
                </div>
                <div class="row">
                    <div class="col-md-8"><br />
                        <span class="blur">{{isMaleBlur==true?"Female":"Male"}} is blur.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', function ($scope) {

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

Output

Description :

In this example of Ng-Blur, Textarea height will increase or decreased based on focus and blur.  


Ng-Blur 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">
<style>
        .active {
            height: 200px !important;
        }
</style>
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnKode">
            <div class="row">
                <br />
                <label class="col-md-2">Description :</label>
                <div class="col-md-10">
                    <textarea ng-class="{true:'active',false:''}[increaseHeight]" class="form-control" ng-focus="increaseHeight=true" ng-blur="increaseHeight=false"></textarea>
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnKode', ['$scope', function ($scope) {

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

Output

Description :

Ng-Blur-7


Ng-Blur 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnIt">
            <h3>Ng-Blur</h3>
            <h3 ng-show="msg">Enter your text here</h3>
            <input class="form-control" type="text" ng-focus="msg=true" ng-blur="msg=false" />
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('LearnIt', ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.msg = false;
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Blur-8


Ng-Blur 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="LearnIt">
            <h3>Ng-Blur</h3>
            <h3>Enter your Name here</h3>
            <input class="form-control" ng-model="name" type="text" ng-blur="checkName(name)" />
            <h3>Enter your Age here(Age should be 18 to 60 years.)</h3>
            <input class="form-control" ng-model="age" type="text" ng-blur="checkAge(age)" />
            <label ng-show="!msg && age">Your age is not valid.</label>
            <label ng-show="msg && age">Your age is valid.</label>
        </div>
        <script>
            var app = angular.module("app", []);
            app.controller('LearnIt', ['$scope', '$timeout', function ($scope, $timeout) {
                $scope.checkName = function (name) {
                    if (name == undefined | name == "" || typeof name == "undefined") {
                        alert("Please enter your Name.");
                    };
                };
                $scope.checkAge = function (age) {
                    var ageInNumber = parseInt(age);
                    if (ageInNumber > 18 && ageInNumber < 60)
                        $scope.msg = true;
                    else
                        $scope.msg = false;
                };
            }]);
        </script>
    </div>
</body>
</html>

Output