uttesh/ngreactions

Is an Angular directive for reactions like rating on services, which will allow customers to choose the reaction on the service like the latest facebook reactions, its fully customizable directive, can integrate any images instead of default.

ngreations demo

Is an Angular directive for reactions like rating on services, which will allow customers to choose the reaction on the service like the latest facebook reactions, its fully customizable directive, can integrate any images instead of default.

Font icon not not customoizable only images.

Quick start

bower install ng-reactions

or alternatively download and include ngreactions.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));
        };
    
}); 

Rendering

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

Contributions

For problems/suggestions please create an issue on Github.

Contributors

• @uttesh

ngreactions's Issues

General Questions

Hi,

Thanks for this directive, it looks great and I don't believe there are any alternatives like it.

I do have some questions about how it is implemented:

1. Why is the ID set to new Date().getTime()?
2. Does the example need jquery.js? It makes me think the plugin might, too.
3. What's the plan with the commented out slider code?

In Angular 1.4.7 images do not scale back down

Great concept! I'm using Angular 1.4.7 with your demo code and the image classes are not being removed. Does this happen for you or am I likely missing something?

Thanks!

Icons render incorrectly with Ionic CLI v3

Icons render as chinese language symbols when using Ionic CLI v3.

In demo reactions don't un...feel?

Reactions maintain color after a new reaction is selected in demo. Haven't tried in app yet. Might be an issue solely in demo. Will report back if I find otherwise.

Some Suggestions

Hi,

Here are some suggestions I have to improve your directive:

1. Allow it to work with nested ratings on the scope ie. $scope.ratings.user, currently that doesn't work.
2. Simplify much of the code in the directive using a directive HTML template with an ng-repeat for the reactions.
3. Change the explicit addClass / removeClass code to use ng-class instead.
4. Add a main section in bower for the js and the css to auto-inject into applications easier.