Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/uttesh/ngreactions
Last synced: about 7 hours ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/uttesh/ngreactions
- Owner: uttesh
- License: mit
- Created: 2015-11-06T09:23:07.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-11T12:10:09.000Z (over 8 years ago)
- Last Synced: 2024-10-12T13:34:27.876Z (about 1 month ago)
- Language: CSS
- Homepage: http://uttesh.github.io/ngreactions/
- Size: 0 Bytes
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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
```
```
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
```
font reactions
Image reactions
```
## Contributions
For problems/suggestions please create an issue on Github.
## Contributors
* [@uttesh](https://twitter.com/uttesh)