Like/dislike functionality in AngularJs

Question

I am trying to achieve likes/dislikes functionality but it's not working. I am newbie for this kind of functionality.

I've added my snippet about what exactly I am trying to do.

 var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.technologies = [ {name:"C",likes:0,dislikes:0}, {name:"C#",likes:0,dislikes:0}, {name:"Java",likes:0,dislikes:0}, {name:"WAD",likes:0,dislikes:0} ]; $scope.liketech = function(technology){ technology.technologies.likes++; } $scope.Disliketech = function(technology){ technology.technologies.dislikes++; } });

 *{ margin:0px; padding:0px; } html{ padding:0px; margin:0px; } body{ font-size: 14px; font-family: Arial; color:#333; padding:0px; margin:0px; } table,tr,th,td{ border:1px solid; border-collapse:collapse; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <table style="width:100%;"> <tr height="25"> <th width="25%">Technologies</th> <th width="25%">Likes</th> <th width="25%">Dislikes</th> <th width="25%">Likes</th> </tr> <tr height="25" 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="liketech(technology);"/><input type="button" value="DisLike" ng-click="Disliketech(technology);"/></td> </tr> </table> </div>

Answer 1

Your function should be like this:

$scope.liketech = function(technology){
    technology.likes++;
}
$scope.Disliketech = function(technology){
    technology.dislikes++;
}

Working demo

You have typo in ng-rtepeat . Which should be ng-repeat .

Answer 2

You can just pass $index to make it working.

$scope.liketech = function(index){
    $scope.technologies[index].likes += 1;
}
$scope.Disliketech = function(index){
    $scope.technologies[index].dislikes += 1;
}

However, this will be applied on client side only.

You can do the database stuffs by $http request in your controller function.

 var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.technologies = [ {name:"C",likes:0,dislikes:0}, {name:"C#",likes:0,dislikes:0}, {name:"Java",likes:0,dislikes:0}, {name:"WAD",likes:0,dislikes:0} ]; $scope.liketech = function(index){ $scope.technologies[index].likes += 1; } $scope.Disliketech = function(index){ $scope.technologies[index].dislikes += 1; } });

 *{ margin:0px; padding:0px; } html{ padding:0px; margin:0px; } body{ font-size: 14px; font-family: Arial; color:#333; padding:0px; margin:0px; } table,tr,th,td{ border:1px solid; border-collapse:collapse; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <table style="width:100%;"> <tr height="25"> <th width="25%">Technologies</th> <th width="25%">Likes</th> <th width="25%">Dislikes</th> <th width="25%">Likes</th> </tr> <tr height="25" 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="liketech($index);"/> <input type="button" value="DisLike" ng-click="Disliketech($index);"/></td> </tr> </table> </div>

Answer 3

Try this,

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.technologies = [{ name: "C", likes: 0, dislikes: 0 }, { name: "C#", likes: 0, dislikes: 0 }, { name: "Java", likes: 0, dislikes: 0 }, { name: "WAD", likes: 0, dislikes: 0 }]; $scope.liketech = function(index,tech) { like= parseInt(tech.likes); $scope.technologies[index].likes = ++like; } $scope.Disliketech = function(index,tech) { dislike= parseInt(tech.dislikes); $scope.technologies[index].dislikes = ++dislike; } });

 * { margin: 0px; padding: 0px; } html { padding: 0px; margin: 0px; } body { font-size: 14px; font-family: Arial; color: #333; padding: 0px; margin: 0px; } table, tr, th, td { border: 1px solid; border-collapse: collapse; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <table style="width:100%;"> <tr height="25"> <th width="25%">Technologies</th> <th width="25%">Likes</th> <th width="25%">Dislikes</th> <th width="25%">Likes</th> </tr> <tr height="25" 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="liketech($index,technology);" /> <input type="button" value="DisLike" ng-click="Disliketech($index,technology);" /> </td> </tr> </table> </div>

Answer 4

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.technologies = [{ name: "C", likes: 0, dislikes: 0 }, { name: "C#", likes: 0, dislikes: 0 }, { name: "Java", likes: 0, dislikes: 0 }, { name: "WAD", likes: 0, dislikes: 0 }]; $scope.liketech = function(index,tech) { like= parseInt(tech.likes); $scope.technologies[index].likes = ++like; } $scope.Disliketech = function(index,tech) { dislike= parseInt(tech.dislikes); $scope.technologies[index].dislikes = ++dislike; } });

 * { margin: 0px; padding: 0px; } html { padding: 0px; margin: 0px; } body { font-size: 14px; font-family: Arial; color: #333; padding: 0px; margin: 0px; } table, tr, th, td { border: 1px solid; border-collapse: collapse; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <table style="width:100%;"> <tr height="30"> <th width="25%">Technologies</th> <th width="25%">Likes</th> <th width="25%">Dislikes</th> <th width="25%">Likes</th> </tr> <tr height="25" 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="liketech($index,technology);" /> <input type="button" value="DisLike" ng-click="Disliketech($index,technology);" /> </td> </tr> </table> </div>