angular-input-stars-directive

WebJar for angular-input-stars-directive

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-input-stars
Last Version	1.6.3
Release Date	Nov 4, 2016
Type	jar
Description	angular-input-stars-directive WebJar for angular-input-stars-directive
Project URL	http://webjars.org

Download angular-input-stars

Filename	Size
angular-input-stars-1.6.3.pom
angular-input-stars-1.6.3.jar	6 KB
angular-input-stars-1.6.3-sources.jar	22 bytes
angular-input-stars-1.6.3-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-input-stars/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-input-stars</artifactId>
    <version>1.6.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-input-stars/
implementation 'org.webjars.bower:angular-input-stars:1.6.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-input-stars/
implementation ("org.webjars.bower:angular-input-stars:1.6.3")

Apache Buildr

'org.webjars.bower:angular-input-stars:jar:1.6.3'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-input-stars" rev="1.6.3">
  <artifact name="angular-input-stars" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-input-stars', version='1.6.3')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-input-stars" % "1.6.3"

Leiningen

[org.webjars.bower/angular-input-stars "1.6.3"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.4.0,2.0)

Project Modules

There are no modules declared in this project.

Welcome

With this directive you can build rating inputs easily.

Installation via bower

bower install angular-input-stars

Inject it

angular.module('app', ['angular-input-stars'])

Use

Simple usage

<input-stars max="5" ng-model="YourCtrl.property"></input-stars>

Customize the base, empty, hover, half and full and icon classes via attributes

<input-stars
    max="5"
    allow-half
    icon-base="fa fa-fw"
    icon-empty="fa-star-o"
    icon-half="fa-star-half-o"
    icon-full="fa-star" 
    icon-hover-full="fa-star" 
    ng-model="YourCtrl.property"
    ></input-stars>

Unlike icon-base, on icon-full, icon-hover and icon-empty you must specify only one class, but that is all you need : ]

Customize or initalize the directive attributes using the ng-attr-{attr} directive thanks to timkishkin for pointing the need of a better clarification

<input-stars 
    ng-model="App.prop1" 
    max="5"
    ng-attr-readonly="{{ enableReadonly || false }}" 
    ng-attr-icon-empty="{{ enableReadonly ? 'fa-twitter' : 'fa-circle-o' }}"
    ng-attr-icon-full="{{ enableReadonly ? 'fa-cog' : 'fa-twitter' }}"
></input-stars> value: {{App.prop1}}

Add a $rootScope function that will be called each time after a star is clicked by using the optional onStarClick attribute (thanks to @whitef0x0)

<input-stars max="5" on-star-click="runMyFunction()" ng-model="YourCtrl.property"></input-stars>

Customize the list class to whatever you want

<input-stars max="5" list-class="shiny-list" ng-model="YourCtrl.property"></input-stars>

Make it readonly, thanks to @anjorinjnr

<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly ></input-stars>
<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly="true" ></input-stars>
<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly="readonly" ></input-stars>

Allow it to have half-icon painted, thanks to @brunoksato

<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" allow-half ></input-stars>

The .css file is optional and it is a bootstrap for customizations.

Dependencies

This directive uses FontAwesome as fallback if you don't specify any icon class.

License

MIT License © Rafael Mello Campanari

Versions

Version
1.6.3 Nov 4, 2016