ng-reactions

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

Download

Icon reaction Sample

Image reaction Sample

Quick start

bower install ng-reactions

or alternatively download and include `ngreactions.js.js` after `angular.min.js`.


Include the js ngreactions.js and font-reactions.css file in respective file
<script src="../ngreactions.js"></script>
<link rel="stylesheet" href="../css/font-reaction/font-reactions.css">

Add the `ng-reactions` module as a dependency when creating your app, e.g.
var app = angular.module('myApp', ['ng-reactions']);`


Inject or use in controller

app.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>