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