Tagged: ng-click function

Simple Like Dislike Event Handling in AngularJS 0

Simple Like Dislike Event Handling in AngularJS

Simple Like Dislike Event Handling in AngularJS

In this Post We Will Explain About is Simple Like Dislike Event Handling in AngularJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Facebook Style Like Unlike using PHP Angular Example

In this post we will show you Best way to implement How To Toggle Like and Dislike in angular, hear for How to create a simple AngularJS like and dislike sport app with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Simple Like and Dislike Button Using AngularJS

$scope.incLikeup angular function will data increment the user Like button when clicked to change
$scope.decDlikeDownangular function will point decrement the user Dislike button when clicked to change

Include External Libs

<head>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<script src = "js/angular.js"></script>
<script src = "js/main.js"></script>
</head>

index.html

<!DOCTYPE html>
<html lang = "en">
<body ng-app = "liveApp">
	<nav class = "live24u navbar navbar-default">
		<div class = "live24u container-fluid">
			<a class = "navbar-brand" href ="https://www.Pakainfo.com">live24u</a>	
		 </div>
	</nav>
	<div class = "row">
		<div class = "col-xl-3"></div>
		<div class = "col-xl-6 well" ng-controller = "likedsilikeCtrl">
			<h3 class = "text-primary">Simple step by step easy Like and Dislike Using AngularJS</h3>
			<hr style = "border-top:2px dotted #3d3d3d;"/>
			<hr /><hr />
			<table class = "live24u table table-bordered">
				<thead>
					<tr>
						<th>Simple Programming Language</th>
						<th>Like</th>
						<th>Dislike</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="lngob in alllanguages">
						<td>{{lngob.name}}</td>
						<td>{{lngob.userLikes}}</td>
						<td>{{lngob.userDislikes}}</td>
						<td><center><button class = "btn btn-primary" ng-click =  "incLikeup(lngob)"><span class = "live24u glyphicon glyphicon-thumbs-up"></span></button> | <button class = "live24u btn btn-danger" ng-click = "decDlikeDown(lngob)"><span class = "live24u glyphicon glyphicon-thumbs-down"></span></button></center></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>		
</html>

main.js

make the Angular script for calling the AngularJS some function

var myApp = angular.module("liveApp", [])
	                         .controller("likedsilikeCtrl" , function($scope){				
	var alllanguages =[
		{name: "PHP", userLikes: 0, userDislikes: 0},
		{name: "angularjs", userLikes: 0, userDislikes: 0},
		{name: "JavaScript", userLikes: 0, userDislikes: 0},
		{name: "Nodejs", userLikes: 0, userDislikes: 0},
		{name: "Magento", userLikes: 0, userDislikes: 0},
		{name: "Vuejs", userLikes: 0, userDislikes: 0},
		{name: "Meanjs", userLikes: 0, userDislikes: 0},
		{name: "Python", userLikes: 0, userDislikes: 0},
		{name: "HTML", userLikes: 0, userDislikes: 0},
		{name: "CSS", userLikes: 0, userDislikes: 0},
	];					
 
	$scope.alllanguages = alllanguages;
 
	$scope.incLikeup = function(lngob){
		lngob.userLikes++;
	}
 
	$scope.decDlikeDown = function(lngob){
		lngob.userDislikes++;
	}
});	

Event Handling in AngularJS

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is like dislike functionality in AngularJs And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.