sebastianha/angular-bootstrap-checkbox

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

angular-bootstrap-checkbox's Issues

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

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

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

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?

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.

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.

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.

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.

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.

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

npm support

Hi, great can please add npm support? thanks!

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?

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.

role="checkbox" to the directive

Hey,

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

role="checkbox"

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 ?

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);
    }
  });
});

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?

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

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.

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

checkbox default check.

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

Do you have radio button?

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

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.

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.

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)