angular-foundation-colorpicker

Native AngularJS color picker directive for Foundation Zurb

Demo page (Foundation 5)

Installation

Copy css/colorpicker.css and js/foundation-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>

The color picker in a fixed element

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

When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)

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