In this session, we will know how to handel events in AngularJS.First, we will write code in Script.js.
Then we will design Style.css for desgining the table also.
And, also I have used bootstrap for eye-catching.
Script.js
/// <reference path="angular.js" />
var myApp = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var technologies = [
{ name: "C#", likes: "0", dislikes: "0" },
{ name: "ASP.NET", likes: "0", dislikes: "0" },
{ name: "SQL
Server", likes: "0", dislikes: "0" },
{ name: "AngularJS", likes: "0", dislikes: "0" }
];
$scope.technologies = technologies;
$scope.incrementLikes = function (technology) {
technology.likes++;
};
$scope.incrementDislikes = function (technology) {
technology.dislikes--;
};
});
Now , we will design view page.NewPractice.cshtml
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>NewPractice</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/script.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />-------Here we have to
take the library
<link href="~/Content/bootstrap.css" rel="stylesheet" />-----For bootstrap
also we have to first generate bootstrap library.
</head>
<body>
<div ng-controller="myController" class="col-md-5">
<table class="table">
<thead>
<tr class="btt btn-primary">
<th>Name</th>
<th>Likes</th>
<th>Dislikes</th>
<th>Likes/Dislikes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="technology in technologies">
<td>{{ technology.name }}</td>
<td>{{ technology.likes }}</td>
<td>{{ technology.dislikes }}</td>
<td>
<input type="button" value="Like" ng-click="incrementLikes(technology)" class="btn
btn-success" />
<input type="button" value="Dislike" ng-click="incrementDislikes(technology)" class="btn
btn-warning" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Then we will design Style.css for desgining the table also.
And, also I have used bootstrap for eye-catching.
Style.css
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
}
Out Put:
Before clicking on the Like and Dislike button the image below.
After clicking Like and Dislike button the image below.
1 comment:
Good Post. I like your blog. Thanks for Sharing
AngularJS Training Institute in Noida
Post a Comment