Mouse events moves
ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave
mouse button is clicked
ng-mousedown
ng-mouseup
ng-click
Friday, August 26, 2016
Mouse events moves
ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave
mouse button is clicked
ng-mousedown
ng-mouseup
ng-click
Angular JS Events
Example:
<div ng-app="test" ng-controller="action">
<button ng-click="count = count+1 ">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('test', []);
app.controller('action', function($scope) {
$scope.count = 0;
});
</script>
- ng-blur
- ng-change
- ng-click
- ng-copy
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Example:
<div ng-app="test" ng-controller="action">
<button ng-click="count = count+1 ">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('test', []);
app.controller('action', function($scope) {
$scope.count = 0;
});
</script>
Search action Angular JS
<div ng-app="mysearch" ng-controller="namesearch">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in name | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('mysearch', []).controller('namesearch', function($scope) {
$scope.name = [
'Ram',
'Nandu',
'vel',
'mani',
'jubi',
];
});
</script>
<div ng-app="mysearch" ng-controller="namesearch">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in name | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('mysearch', []).controller('namesearch', function($scope) {
$scope.name = [
'Ram',
'Nandu',
'vel',
'mani',
'jubi',
];
});
</script>
- -binding part
- properties and methods
- both view and controller
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('test', []).controller('menu', function($scope) {
$scope.names = [
{furit:'Orange',vegtable:'Drumstick'},
{furit:'Apple',vegtable:'Ladyfinger'},
{furit:'Grape',vegtable:'Bringal'}
];
});
</script>
<div ng-app="test" ng-controller="menu">
<ul>
<li ng-repeat="x in names">
{{x.furit }}
</li>
</ul>
<ul>
<ol ng-repeat="x in names">
{{x.vegtable}}
</ol>
</ul>
</div>
<script>
angular.module('test', []).controller('menu', function($scope) {
$scope.names = [
{furit:'Orange',vegtable:'Drumstick'},
{furit:'Apple',vegtable:'Ladyfinger'},
{furit:'Grape',vegtable:'Bringal'}
];
});
</script>
<div ng-app="test" ng-controller="menu">
<ul>
<li ng-repeat="x in names">
{{x.furit }}
</li>
</ul>
<ul>
<ol ng-repeat="x in names">
{{x.vegtable}}
</ol>
</ul>
</div>
Posts
