AngularJS Events
Mouse Events
Mouse events occur when the cursor moves over an element, in this order:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
- ng-mousedown
- ng-mouseup
- ng-click
You can add mouse events on any HTML element.
ng-mousemove Example :
Increase the count variable when the mouse moves over the H1 element:
Example
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</html>
The ng-click Directive
Example
The ng-click directive defines AngularJS code that will be executed when the element is being clicked.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</html>
You can also refer to a function:
Example
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button>
<p>{{ count }}</p>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>
</html>
Toggle, True/False
If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch:
Example
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show="showMe">
<h2>Menu:</h2>
<div>HTML</div>
<div>PHP</div>
<div>ANGULARJS</div>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
}
});
</script>
</body>
</html>
$event Object
You can pass the $event object as an argument when calling the function.
The $event object contains the browser's event object:
Example:
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
$scope.x = myE.clientX;
$scope.y = myE.clientY;
}
});
</script>
</html>
AngularJS includes certain directives which can be used to provide custom behavior on various DOM events, such as click, dblclick, mouseenter etc.
ng-click:
The ng-click directive is used to provide event handler for click event.
Example:
1) Show the password.
<!DOCTYPE html>
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>show the password</h2>
<div ng-controller="myController">
Enter Password: <input type="password" ng-model="password" /> <br />
<button ng-click="DisplayMessage(password)">Show Password</button
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope, $window) {
$scope.DisplayMessage = function (value) {
$window.alert(value)
}
});
</script>
</body>
</html>
2) show the message.
<html>
<head>
<title>AngualrJS Controller</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<h2>Show the message</h2>
<div ng-controller="myController">
Enter Message: <input type="text" ng-model="message" /> <br />
<button ng-click="showMsg(message)">Show Message</button>
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "Hello World!";
$scope.showMsg = function (msg) {
alert(msg);
};
});
</script>
</body>
</html>
- onetime and twotime binding on ng-click.
<html>
<head>
<title>onetime & twotime Binding in ng-click</title>
<script src="angular.min.js"></script>
<script>
(function(angular) {
'use strict';
angular.module('oneTimeBidingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
var counter = 0;
var names = ['VisionComputers', 'Basics', 'Packages', 'Scripting','WebDesigning'];
/*
* expose the event object to the scope
*/
$scope.clickMe = function(clickEvent) {
$scope.name = names[counter % names.length];
counter++;
};
}]);
})(window.angular);
</script>
</head>
<body ng-app="oneTimeBidingExampleApp">
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Click Me</button>
<p id="one-time-binding-example">One time binding: {{::name}}</p>
<p id="normal-binding-example">Normal binding: {{name}}</p>
</div>
</body>
</html>
4)Add couching fees List
<html>
<head>
<script src="angular.min.js">
</script>
<style>
h3 {margin:10px 0;}
ul {
display:inline;
list-style-type:none;
padding:0;
}
</style>
</head>
<body style="font:17px Consolas;">
<!--THE VIEW.-->
<div ng-app="myApp"
ng-init="list=[
{ name:'Fundamentales & Ms-office', fees:1000 },
{ name:'D.C.A', fees:3000 },
{ name:'P.G.D.C.A', fees:6000 },
{ name:'WebDesigning', fees:5000 },
{ name:'HardWare & NetWorking', fees:2500 }]"
ng-controller="myController">
<div style="float:left;
padding:10px;
margin:0 auto;">
<h3>Couching & Fees</h3>
<!-- LOOP.-->
<ul ng-repeat="course in list">
<li>{{ course.name + ' - ' + (course.fees | currency) }}</li>
</ul>
</div>
<div style="float:left;margin:30px;">
<input type="text" ng-model="name" placeholder="Enter the Course" /> -
<input type="text" ng-model="fees" placeholder="Enter a Fees" />
<p><button ng-click="add()">Add the course</button></p>
</div>
</div>
</body>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($course) {
$course.add = function ()
{
if (angular.isDefined($course.name) && $course.name != '' && $course.fees != '')
{
// ADD A NEW ELEMENT.
$course.list.push({ name: $course.name, fees: $course.fees });
// CLEAR THE FIELDS.
$course.name = '';
$course.fees = '';
}
}
}]
);
</script>
</html>
5) ADD And Remove the Data
<html ng-app="visApp">
<head>
<script src="angular.min.js"></script>
<script>
angular.module('visApp', [])
.controller('VisListController', function() {
var visList = this;
visList.viss = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
visList.addTodo = function() {
visList.viss.push({text:visList.visText, done:false});
visList.visText = '';
};
visList.remaining = function() {
var count = 0;
angular.forEach(visList.viss, function(vis) {
count += vis.done ? 0 : 1;
});
return count;
};
visList.archive = function() {
var oldTodos = visList.viss;
visList.viss = [];
angular.forEach(oldTodos, function(vis) {
if (!vis.done) visList.viss.push(vis);
});
};
});
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body>
<h2>Add and Remove Data</h2>
<div ng-controller="VisListController as visList">
<span>{{visList.remaining()}} of {{visList.viss.length}} remaining</span>
[ <a href="" ng-click="visList.archive()">archive(remove)</a> ]
<ul class="unstyled">
<li ng-repeat="vis in visList.viss">
<label class="checkbox">
<input type="checkbox" ng-model="vis.done">
<span class="done-{{vis.done}}">{{vis.text}}</span>
</label>
</li>
</ul>
<form ng-submit="visList.addTodo()">
<input type="text" ng-model="visList.visText" size="30"
placeholder="add new visList here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743