#Author : mounicraju@gmail.com
#The below code is placed where we want to display all the data
<!DOCTYPE html>
<html lang = "en"><head>
<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1"/>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<script src = "js/angular.js"></script>
<script src = "js/script.js"></script>
</head>
<body ng-app = "simModule">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
</div>
</nav>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well" ng-controller = "simController">
<h3 class = "text-primary">Like and Dislike buttons Using AngularJS</h3>
<hr style = "border-top:1px dotted #000;"/>
<br /><br />
<table class = "table table-bordered">
<thead>
<tr>
<th>Programming Language</th>
<th>Like</th>
<th>Dislike</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pLang in pLangs">
<td>{{pLang.name}}</td>
<td>{{pLang.Likes}}</td>
<td>{{pLang.Dislikes}}</td>
<td><center><button class = "btn btn-primary" ng-click = "incrementUp(pLang)">
<span class = "glyphicon glyphicon-thumbs-down"></span></button></center></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
# Creating the script for calling the AngularJS function -This is where the angularjs function will be called to perform the request
var Demoapp = angular.module("simModule", [])
.controller("simController" , function($scope){
var pLangs =[
{name: "C#", Likes: 0, Dislikes: 0},
{name: "Java", Likes: 0, Dislikes: 0},
{name: "PHP", Likes: 0, Dislikes: 0},
{name: "VB.NET", Likes: 0, Dislikes: 0},
{name: "Python", Likes: 0, Dislikes: 0},
{name: "Pearl", Likes: 0, Dislikes: 0},
{name: "Ruby", Likes: 0, Dislikes: 0},
];
$scope.pLangs = pLangs;
$scope.incrementUp = function(pLang){
pLang.Likes++;
}
$scope.decrementDown = function(pLang){
pLang.Dislikes++;
}
});
.controller("simController" , function($scope){
var pLangs =[
{name: "C#", Likes: 0, Dislikes: 0},
{name: "Java", Likes: 0, Dislikes: 0},
{name: "PHP", Likes: 0, Dislikes: 0},
{name: "VB.NET", Likes: 0, Dislikes: 0},
{name: "Python", Likes: 0, Dislikes: 0},
{name: "Pearl", Likes: 0, Dislikes: 0},
{name: "Ruby", Likes: 0, Dislikes: 0},
];
$scope.pLangs = pLangs;
$scope.incrementUp = function(pLang){
pLang.Likes++;
}
$scope.decrementDown = function(pLang){
pLang.Dislikes++;
}
});
Hi Mounic how are you doing
ReplyDelete