sebastianha/angular-bootstrap-checkbox

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

angular-bootstrap-checkbox

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

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]:

<checkbox
    ng-model="checkboxModel"
    name="custom-name"              (Optional)
    ng-true-value="The Truth"       (Optional)
    ng-false-value="The Untruth"    (Optional)
    ng-change="onChange()"          (Optional)
    indeterminate="true"            (Optional)
    ng-indeterminate-value="test"   (Optional)
></checkbox>

Additionally you can set the size:

<checkbox ...></checkbox>            (Normal size, corresponds to 'btn-xs')
<checkbox large ...></checkbox>      (Large, corresponds to 'btn-sm')
<checkbox larger ...></checkbox>     (Larger, corresponds to Button default size)
<checkbox largest ...></checkbox>    (Largest, corresponds to 'btn-lg')

And also style the checkboxes like Bootstrap buttons:

<checkbox class="btn-primary"></checkbox>    (Looks like primary button)
<checkbox class="btn-success"></checkbox>    (Looks like success button)
<checkbox class="btn-info"></checkbox>       (Looks like info button)
<checkbox class="btn-warning"></checkbox>    (Looks like warning button)
<checkbox class="btn-danger"></checkbox>     (Looks like danger button)

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

angular-bootstrap-checkbox's Issues

checkbox default check.

how checkbox default check
i tried checked attribute and also try ng-checked attribute but not work.

Remove Glow and blue border

When i click on the checkbox i am getting a glow or border around it. How to remove it.

Thanks for providing such a wonderful directive.

Conditional classes with ng-class

Hi,

I realize that this might be issue with ngClass itself, but maybe you will find solution.

when I write: <checkbox ng-class={'btn-success':isActive}>

it gives me an error. Inspecting code, the result is something like:
... ng-class:{'btn-success':isActive} {'btn-xs':size==='default'} ...

Apparently merging of ng-class is not being done properly.

Any way to fix this, or work around it?

Does not work with ng-model-options

Tried using with:
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 300, 'blur': 0 } }"
ng-change="addPromise(updateApps(app, group), updatePromises);"

And the checkbox stopped working. It works the very first time and then does not work. The ng-model is an object. I am not using ng-true-value or ng-false-value

Without the ng-model-options the ng-change works but I need to have the ng-model-options otherwise my backend server code gets called all the time

Prefix the directive tag name

Per angular documentation...

Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a <carousel> directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.

this to me means the directive should be something like sb-checkbox.

Mobile browser support

Checkbox does not register a click on mobile Safari or Chrome. Any suggestions for a workaround for this?

Update:
Just did some more digging. It looks like the click event that is bound in the directive is not properly binding on mobile. Note that my app does have ngTouch included.

elem.bind("click", function() {
  console.log('This was clicked') // This never gets logged on mobile
  scope.$apply(function() {
    if(modelCtrl.$modelValue === falseValue) {
      modelCtrl.$setViewValue(trueValue);
    } else {
      modelCtrl.$setViewValue(falseValue);
    }
  });
});

Checkbox does not support disable

Unless there is something I am missing, I don't see anyway to use the disable attribute nor the ng-disable directive with this.

stopPropagation

Hey there,

could you please insert a "stopPropagation" for "click" Event, so that $event is not fired through

elem.bind("click", function($event) {
scope.$apply(function() {
if($event) {
$event.stopPropagation();
}

Thanks

Visual artifact

Can't seem to figure out why I am getting a visual artifact in the checkbox..

See https://stackoverflow.com/questions/35906420/bootstrap-checkbox-has-visual-artifact

Indeterminate / Tri-State / Three-State

Hi,
your Checkbox lacks support of the indeterminate state as it is part of the future standard html5 see http://www.w3.org/html/wg/drafts/html/master/forms.html#checkbox-state-(type=checkbox)
Just as a hint 😉
And thank you for sharing your work!
Regards

npm support

Hi, great can please add npm support? thanks!

role="checkbox" to the directive

Hey,

Thanks for the awesome library - Can you add the following to your template?

role="checkbox"

Checkbox without markers

Hi! This thing doesn't work for me:

<input type="checkbox" ng-model="myCheckboxModel"> <checkbox ng-model="myCheckboxModel"></checkbox>
The model is changing, but on element there is no checkbox marker as expected. But everything else works well.

Doesn't support using objects for ng-true-value and ng-false-value.

The component breaks our form when we switch from the regular <input type="checkbox"> as we're using an object expression for the ng-true-value and ng-false-value attributes.

Relevant PR: #32

Background Color is lost onBlur

When having checked the box and then clicking outside of it, it looses its background color (e.g. orange for a btn-warning)

Checking based on inclusion in set

So say I have the following on my model...

var checkBoxItems = [
item1, item2
]

Now I want the checkbox to be checked if the checkbox line == an item in the list. I am also going to have to get the working with an "All" checkbox when the list is empty. This seems pretty complex in this implementation, however, I could just be reading the docs wrong.

ng-class doesn't work

ng-class="row.isRefused?'btn-success':'btn-danger'"

get this error:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 42 of the expression [row.isRefused?'btn-success':'btn-danger' {'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest', 'checked': checked===true}] starting at [{'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest', 'checked': checked===true}].

Is maybe a problem inside the lib?

Remove bootstrap from dependecies

Hello @sebastianha,
thanks for your awesome work with this directive!

What about removing bootstrap (css + jquery) as a dependency for this module?

I guess that if someone is looking for this directive has already bootstrap included, and if not what about including only the checkbox related style? I think it is not useful to download a full library to use just a small piece of it. What do you think about?

In case I can help with that

ng-change get called without even change.

With default html input checkbox if there is ngChange directive placed, ngChange will not get called untill there is a change. But with your directive, it gets called automatically with the page loads for the first time without user interaction. This seems to me a bug as it is supposed to work exactly like html checkbox. I am having issue with it.

Wrapper element should have an 'checked' class

The main element should have an 'checked' class or something to determine that the button is checked. There's not really any way to style the button for different states as is.

Removing trueValue and falseValue

Hi,

thanks for great work. I am new to Angular so probably I dont know what I am talking about but.. I have simplified your directive and it still works great. I removed trueValue and falseValue and replaced them with boolean values. Are they important? It works without them.

How do I include this in my app module?

I've installed the package via npm and confirmed it's in my node_modules directory but I cannot figure out how to include it in my app module.

This is what I tried, but it doesn't work

import { ui } from 'angular-bootstrap-checkbox';
...

@NgModule({
declarations: [
  ...
],
imports: [
  ...
  ["ui.checkbox"]
],
providers: [
  ...
]
})
export class AppModule { }

How do I include this package into my project?

Assigning Dynamic Models

Hi,

I try adding dynamic models but the checkbox just won't work.

Like this one ng-model ="branch[i]"

Where I is any variable that I would want to create.

Do you have radio button?

This is nice plugin which I've seen. Do you have radio button functionality with this?

use a hidden input type="checkbox" to conect with angular standard form validation

As in your directive, you don't use a hidden checkbox synchronised with the ng-model of the directives, it seems to me difficult to connect to angular common form handling like for example make the submit button submitable and set the checkbox field required...

This stuff is easy with standard form element like input..

Would it be difficult to integrate an hidden checkbox to achieve this ?