"Like / Dislike count with angular js"
Bootstrap 3.0.0 Snippet by vicky04666

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <body ng-app="myModule"> <div class="col-md-10 col-md-offset-1 col-xs-12 col-sm-12" ng-controller="myController"> <div class="col-md-12 col-xs-12"> <div class="col-md-3 div1 col-xs-3 "> <p>Language</p> </div> <div class="col-md-3 div2 col-xs-3"> <p>Likes</p> </div> <div class="col-md-3 div3 col-xs-3 dislike"> <p>Dislikes</p> </div> <div class="col-md-3 div4 col-xs-3"> <p>Likes/Dislikes</p> </div> </div> <div class="col-md-12 col-xs-12 text-center " ng-repeat="technology in technologies "> <div class="col-md-3 div_sub col-xs-3"> <h6>{{ technology.name }}</h6> </div> <div class="col-md-3 div_sub col-xs-3"> <h6><span>{{ technology.likes }}</span> Likes</h6> </div> <div class="col-md-3 div_sub col-xs-3 dislike"> <h6><span>{{technology.dislikes}}</span> Dislikes</h6> </div> <div class="col-md-3 div_sub col-xs-3 "> <button type="button" class="btn btn-success" ng-click="incrementLikes(technology)"><span class="glyphicon glyphicon-thumbs-up"></span> Likes</button> <button type="button" class="btn btn-danger" ng-click="incrementDislikes(technology)"> <span class="glyphicon glyphicon-thumbs-up"></span>Dislikes</button> </div> </div> </div> <script> var app = angular .module("myModule", []) .controller("myController", function($scope) { var technologies = [ { name: "C#", likes: 181, dislikes: 190 }, { name: "ASP.NET", likes: 872, dislikes: 90 }, { name: "SQL", likes: 155, dislikes: 87 }, { name: "AngularJS", likes: 302, dislikes: 21 } ]; $scope.technologies = technologies; $scope.incrementLikes = function(technology) { technology.likes++; }; $scope.incrementDislikes = function(technology) { technology.dislikes++; }; }); </script> </body>
body { font-size: 20px; } *, p { margin: 0px; padding: 0px; } p { line-height: 3.5em; text-align: center; font-size: 1em; } h6 { line-height: 35px; font-size: 18px; } h6 span { color: green; font-weight: bold; } .btn { margin: 10px 5px 11px 0px; } .dislike h6 { line-height: 35px; font-size: 18px; } .dislike h6 span { color: red; font-weight: bold; } .div1 { color: #fff; background: #ff7942; border: 1px solid #ff7942; } .div2 { color: #fff; background: #f12f0e; border: 1px solid #f12f0e; } .div3 { color: #fff; background: #ff0048; border: 1px solid #ff0048; } .div4 { color: #fff; background: #ff0000; border: 1px solid #ff0000; } .div_sub { border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 768px) { .btn { padding: 7px 2px 8px 2px; font-size: 12px; } }

Related: See More

Rubik Presentation Page
Modal lightbox with like/dislike
Table row count and sortable

Questions / Comments: