AngularJS-10 : OnClick Event handling
angular.min.js
-------------------------------------
Script.js
------------------------------------
/// <reference path="angular.min.js" />
var myAppModule = angular.module("myAppModule",[]).controller("myDataController",function ($scope) {
var technologies =
[
{
name: "JAVA",
likes: 0,
dislikes: 0
},
{
name: ".NET",
likes: 0,
dislikes: 0
}
]
$scope.technologies = technologies;
$scope.incrementLikes = function(tech){
tech.likes++;
}
$scope.decrementLikes = function(tech){
tech.dislikes++;
}
});
myHTML.html
---------------------------------------
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="resources/js/Script.js"></script>
</head>
<body ng-controller="myDataController">
<table>
<thead>
<tr>
<th>Technology Name </th>
<th>Likes</th>
<th>Dislikes</th>
<th>Likes/Dislikes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tech in technologies">
<td>{{tech.name}}</td>
<td>{{tech.likes}}</td>
<td>{{tech.dislikes}}</td>
<td>
<input type="button" value="Likes" ng-click="incrementLikes(tech)"/>
<input type="button" value="DisLikes" ng-click="decrementLikes(tech)"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment