This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.
Previous releases:
- branch 2.0 (Bootstrap v2.x.x)
- branch 1.0 if you need a functionality from the original plugin or IE<9 support
Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js.
Add a dependency to your app, for instance:
angular.module('myApp', ['colorpicker.module'])
Hex format
<input colorpicker type="text" ng-model="your_model" />or
<input colorpicker="hex" type="text" ng-model="your_model" />RGB format
<input colorpicker="rgb" type="text" ng-model="your_model" />RBGA format
<input colorpicker="rgba" type="text" ng-model="your_model" />As non input element
<div colorpicker ng-model="your_model"></div>The color picker template with an input element
<input colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />Position of the color picker (top, right, bottom, left).
<input colorpicker colorpicker-position="right" type="text" ng-model="your_model" />The color picker in a fixed element
<input colorpicker colorpicker-fixed-position="true" 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" type="text" ng-model="your_model" />The color picker in UI Bootstrap modal (the parent element position property must be set to relative)
<input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />