Simple angularJS directive which will provide the rating through the reaction of the customer or anything which need rating . inspired from latest facebook reaction menu, using this we can create our own function related reactions and use as rating, images are custamizable
bower install ng-reactionsor alternatively download and include `ngreactions.js.js` after `angular.min.js`.
<script src="../ngreactions.js"></script> <link rel="stylesheet" href="../css/font-reaction/font-reactions.css">
var app = angular.module('myApp', ['ng-reactions']);`
Inject or use in controllerapp.controller('reactionCtrl', function($scope) { //cerate the reaction object with following fields, below is the list of reactions $scope.reactionList = [{ selected: 'none', minRating: 1, readOnly: false },{ selected: 1, minRating: 1, readOnly: false },{ selected: -1, minRating: 1, readOnly: true }]; // below is the image list used for the reaction, these are default set it can be modified according to requirement $scope.imageset = [ {icon: 'static/images/emo_laugh.PNG', rating: '3', name: 'Happy'}, {icon: 'static/images/love.png', rating: '1', name: 'OK'}, {icon: 'static/images/smile.png', rating: '2', name: 'Good'}, {icon: 'static/images/sad.png', rating: '0', name: 'Bad'}, {icon: 'static/images/angry.png', rating: '-1', name: 'Frustrated'} ] // below is the icon list used for the reaction, these are default set. except icon other values can be modified. $scope.iconset = [ {icon: 'ra-medium reaction-happy', rating: '3', name:'Happy'}, {icon: 'ra-medium reaction-neutral', rating: '1',name:'OK'}, {icon: 'ra-medium reaction-smile', rating: '2',name:'Good'}, {icon: 'ra-medium reaction-sad', rating: '0',name:'Bad'}, {icon: 'ra-medium reaction-frustrated', rating: '-1',name:'Frustrated'} ] // this is the callback function called on selection of the reactions $scope.ratingsCallback = function(reactionsObject,selected) { console.log('Selected rating is : '+JSON.stringify(selected)); console.log('reactionsObject : '+JSON.stringify(reactionsObject)); }; });
In Html<h4> font reactions </h4> <div ng-controller="reactionCtrl"> <div ng-repeat="reaction in reactionList"> <ng-reactions action="ratingsCallback(reactionsObject,selected)" data='reaction' type="icon" itemset="iconset"> </ng-reactions> </div> </div> <h4> Image reactions </h4> <div ng-controller="reactionCtrl"> <div ng-repeat="reaction in reactionList"> <ng-reactions action="ratingsCallback(reactionsObject,selected)" data='reaction' type="image" itemset="imageset"> </ng-reactions> </div> </div>