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
<!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>
Description :
Example of Ng-Blur
<!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>
Description :
Example of Ng-Blur
<!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>
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
<!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>
Description :
In this example, We have added ng-focus on radiobuttons one is for male and another one is for female. 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>
.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>
Description :
In this example of Ng-Blur, Textarea height will increase or decreased based on focus and blur.
<!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>
Description :
Ng-Blur-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>
Description :
Ng-Blur-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>