grantmac / angular-bootstrap-colorpicker

Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.

angular-bootstrap-colorpicker

This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.
If you need a functionality from the original plugin or IE<9 support switch to 1.0.0 branch in this repository.

Demo page

Installation

Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js. Add a dependency to your app, for instance: angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'colorpicker.module'])

Examples:

Hex format

<input colorpicker class="span2" type="text" ng-model="your_model" />

or

<input colorpicker="hex" class="span2" type="text" ng-model="your_model" />

RGB format

<input colorpicker="rgb" class="span2" type="text" ng-model="your_model" />

RBGA format

<input colorpicker="rgba" class="span2" type="text" ng-model="your_model" />

As non input element

<div colorpicker class="span2" ng-model="your_model"></div>

Position of the colorpicker (top, right, bottom, left).

<input colorpicker colorpicker-position="right" class="span2" type="text" ng-model="your_model" />