View on GitHub

Angular-sh-checkbox

A checkbox directive that does't depend on the HTML checkbox but uses ng-model and styles the checkbox using font-awesome icons.

Download this project as a .zip file Download this project as a tar.gz file

Motivation

The HTML check box input type is just difficult to style across browsers. I tried various CSS hacks before deciding it wasn't worth the time to deal with all the problems and testing and would be easier to just code up a control that has the behavior and display I expect.

Usage

To use the control (first install font-awesome): bower install shusain/angular-sh-checkbox#~0.0.1 --save

Include font-awesome css and the check box directive in your script block:

<script type="text/javascript" src="bower_components/angular-sh-checkbox/directive.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css"/>

Include the module dependency in your app:

var myApp = angular.module("myApp", ["intellectual-tech.UIControls"]);

Use the directive:

<sh-checkbox
  label="Test 1"
  ng-model="test">
</sh-checkbox>


<sh-checkbox
  label="Test 2"
  ng-model="test"
  checked-icon-class="fa fa-check-square-o"
  un-checked-icon-class="fa fa-square-o">
</sh-checkbox>

Authors and Contributors

2014, Shaun Husain (@shusain)

Support or Contact

Having trouble with the control? Contact us at http://www.intellectual-tech.com, shaun@intellectual-tech.com.