Friday 25 December 2015

Blur event in angularjs

Hi,

ngBlur-

              ngBlur is a directive in ng module.

It have a special behavior on blur event. A blur event is fired when an element lost his focus.

As the blur event is executed synchronously also during DOM manipulations (e.g. removing a focused input), AngularJS executes the expression using scope.$evalAsync if the event is fired during an $apply to ensure a consistent state.

 Here i am introducing an example, in which after clicking the input box a text 'ngBlur used' append after the 'Hello welcome to angularjs'.

So, in home.html file add the following lines of code-

<ion-view>
<ion-content>
<div>
<h3>Example of 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></ion-content>
</ion-view>


In HomeCtrl.js file add the following lines of code-

Demo.controller('HomeCtrl', ['$scope', '$timeout', function ($scope, $timeout) { $scope.msg = "Hello welcome to angularjs"; $scope.ngBlur = function () { $scope.clicked = false; $timeout(function () { if ($scope.clicked) { return; } $scope.blur = true; $scope.focus = false; $scope.msg = $scope.msg + ' ngBlur used '; }) } }]);


In style.css file add following lines of code-


.myBlur { background-color: lightskyblue; } .myFocus { border-left: 5px solid; }


Thanks...

No comments:

Post a Comment