https://github.com/sebastianha/angular-bootstrap-checkbox

A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design
https://github.com/sebastianha/angular-bootstrap-checkbox

angularjs bootstrap checkbox javascript

Last synced: 6 days ago
JSON representation

A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design

• Host: GitHub
• URL: https://github.com/sebastianha/angular-bootstrap-checkbox
• Owner: sebastianha
• License: mit
• Created: 2014-05-21T13:00:34.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-04-05T12:46:53.000Z (over 7 years ago)
• Last Synced: 2024-04-24T13:56:08.180Z (7 months ago)
• Topics: angularjs, bootstrap, checkbox, javascript
• Language: JavaScript
• Size: 57.6 KB
• Stars: 149
• Watchers: 13
• Forks: 67
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
angular-bootstrap-checkbox

==========================

A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design

Screenshot:

![Screenshot](/checkbox.png?raw=true "Screenshot")

### Description:

The standard checkboxes which use the input HTML element just don't look good in combination with Bootstrap.

Surprisingly, I could not find any nice looking, simple checkbox, so I built one. It is based on a button and Glyphicons which behaves like a normal checkbox.

The angular-bootstrap-checkbox is compatible to the use of the original AngularJS input[checkbox], with one minor change: while the original implementation allows an "uninitialized" or other then defined state of the model this one forces "false" or "ng-false-value" (not checked) when not set to "true" or "ng-true-value".

### Installation via Bower:

```

$ bower install angular-bootstrap-checkbox --save

```

### Usage:

Add "ui.checkbox" to your modules list. Then you can use it like AngularJS input[checkbox]:

```

```

Additionally you can set the size:

```

            (Normal size, corresponds to 'btn-xs')

      (Large, corresponds to 'btn-sm')

     (Larger, corresponds to Button default size)

    (Largest, corresponds to 'btn-lg')

```

![Screenshot](/sizes.png?raw=true "Screenshot Sizes")

And also style the checkboxes like Bootstrap buttons:

```

    (Looks like primary button)

    (Looks like success button)

       (Looks like info button)

    (Looks like warning button)

     (Looks like danger button)

```

![Screenshot](/styles.png?raw=true "Screenshot Styles")

See index.html and app.js for examples and how it works.

### Testing:

Start web server e.g. via Python:

```

$ python -m SimpleHTTPServer 8000

```

Start Karma E2E tests (has to be installed globally before):

```

$ karma start

```

### License

Copyright (c) 2016 Sebastian Hammerl, Getslash GmbH

Licensed under the MIT License