frapontillo / angular-bootstrap-switch Goto Github PK

View Code? Open in Web Editor NEW

302.0 302.0 114.0 210 KB

AngularJS directive for the bootstrap-switch jQuery plugin.

License: Apache License 2.0

JavaScript 93.11% HTML 6.25% CSS 0.65%

angular-bootstrap-switch's People

Contributors

Stargazers

Watchers

Forkers

bchatelard avgp lyonlai shipow bardusco chthomos tamara-cherevko noeticpenguin manabu-gt cherbst sgmonda msylvain mhennings sparkyfen preechaj rodrigore ehunter miracle-as veerendrakumar-github hh-akonstantinov destiny1020 piccolin tijptjik everettqin fiznool mtyeh411 wang3g geoah ololo-psh martinweindel alexbeletsky claudia1204 denjones danielgarciagil splaktar bhupendra2020 stantoncharlton airain ledzep2 sanjeevkumar gunpowderlabs shmuelf aslakjo ecarruda lgordon2 elton0895 drammy mprentic-harris albulescu scottbcovert valepu quiz16 tegonal mariusbrn brorlandi krimhorn rimvydasurbonas yonzeo nisho abrararies zpzgone alexilyaev smytheb pkdevbox kordondev diptenagile tdelev boot-start romanblanco abhilash0001 vinothinibalakrishnan phlaidback serofax lzc0088 mfc3370 technaturally ervinkleitz dmitry-kostin tucq88 qingbei jjfattz vincent-leonardo andrerafaelmezzalira majkelo joeprisk zoiew huangxuelun catxii alexurmi lucidwebs isaahmdantas zwartpet frekele santhoshnaini dyilm bryant1410 maria201181 jimmyblylee guille367 aprilssmile

angular-bootstrap-switch's Issues

Boolean value error

If you define ng-true-value="1" ng-false-value="0" (note there is only 0 not '0') than You have to click twice for false value.

Trigger digest cycle in bootstrap-switch event handler

Hi,

The event handler which updates the the ng-model does not trigger the angular digest cycle, which causes the model to not be updated immediately. The code in question is src/directives/bsSwitch.js#L199.

You should add the following to make the changes immediate:

scope.$apply();

Here are some links about $apply:

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Sorry about no giving you a pull request, did not have any time to fork your project on GitHub.

Anyways thanks for the great angular extension for bootstrap-switch.

error when setting the value of ng-model to "true" manually

If I set the variable to true in my controller, the first 2 times I click on the switch it doesn't update the ng-model variable.

check out this plunker

http://plnkr.co/edit/fHZficmknopo2hGhsLh4?p=preview

Throws error with angular latest 1.2.4 $scope.digest already in progress

var listenToModel = function() {
scope.$watch('ngModel', function(newValue) {
if (newValue !== undefined) {
element.bootstrapSwitch('setState', newValue || false,true);
}
});

thows scope.digest error even though it is $Timeout function

bootstrap 3 support?

is this planning to support the new version of bootstrap-switch?

Binding issues

Hi,

I've found that if I bind switch-active to a model and the model value is false then changing the model in the controller doesn't update the switch UI - its as if it stays in a disabled state even as far as to prevent binding from working and updating the switch state.

Because of this issue I tried binding to switch-readonly and have found that I cannot get it to bind to the same model value at all.

Even switch-readonly="true" and switch-readonly="{{true}}" don't work...? Is this a bug?

Throws a $apply already in progress with angular 1.2.4 when used as an attribute

Using the latest version, everything works fine as long as the directive is used as an element. If it's used as an attribute, the $apply already in progress error is thrown.

element.bootstrapSwitch undefined

when i wire up and run with the angular version i get an error stating that the bootstrapSwitch is undefined.

i was trying to test to see if ng-true-value="0" and ng-false-value="1" work with this control. Seems to work with the jquery version but of course then i would need a directive to talk with the model. Prefer to go this route.

aaron

Prevent swith to post

Hi,

I try to use this module but on each switch I make, it works as expected but it also makes a POST request on my current page. How can I prevent that? Is it related to the switch button or I made something wrong elsewhere?

Also, I have another page where I need to actually switch twice my button before it actually does something. (The modelValue or viewValue is not initialize correctly). Do you have ever seen something like that? For sure, I made a mistake but can't find the cause.

Cheers!

use IIFE to wrap 'use strict'

putting 'use strict' globally forces the strict mode on entire application.

It's better to wrap in IIFE, adding 'use strict' in inner scope.

Working with 1 and 0

Now Yor script work with true/false - can You make it to work with 1/0 as well?? I mean init state - if value=1 then value=true - now if value=1 it's off

On browser refresh directive is broken and not functional

If a press F5 or something similar the directive simply doesn't work.

<slide-toggle on-label="Published" off-label="Unpublished" ng-model="form.settings.published" class="pull-right "></slide-toggle>

That's the my simple code, but this is hapening also in the example.
I have try it with almost every browser.

Unwanted initial animation when false

When my page loads I want the switch to be toggled off. There seems to be an animation to off when initialized. Setting animate to false obviously fixes this but I still want animation.

Tweaking a plunkr I found here...
http://plnkr.co/edit/j4XMzBhgNWF7kM4ApYpD?p=preview

Push it to npm

For browserified based projects is really important to have components in npm. It would be great if you push this to npm as well. :)

Switch not displaying properly if parent initially hidden

If the parent is hidden initially, control does not display properly as the dimensions cannot be calculated. Is there something that can be done to trigger a "recalc"?

From the bootstrap-switch issues: Bttstrp/bootstrap-switch#376

The solution here was to call $('.my-bs-switch-input').bootstrapSwitch('_width'); when visible. Needs support for ng-show/hide perhaps.

Some attributes does not working

I'm trying to use your directive as part of a template within an another directive. Some of attributes gets ignored: switch-readonly, switch-label-width, switch-handle-width. Also the value of ng-true-value and ng-false-value are not working correctly. I added a watch for the ng-model value, but the replied value after toggle is always '' (empty string)

"angular": "~1.2.26",
"jquery": "~2.1.0",
"bootstrap": "~3.2.0",
"bootstrap-switch":"3.0.2",
"angular-bootstrap-switch": "~0.3.0"

Does not respect ngTrueValue/ngFalseValue

I have the following checkbox, that works correctly when I dump the object out into the view with {{ component | json }}:

<input type="checkbox" 
    data-ng-model="component.contains" 
    ng-true-value="1" ng-false-value="0"/>

However, adding the bs-switch directive causes the model to get 'stuck' in the on position:

<input type="checkbox" 
    bs-switch
    data-ng-model="component.contains" 
    ng-true-value="1" ng-false-value="0"/>

The switch moves back and forth, but the underlying model is not updated, rather it stays at "1"

Is there a workaround where you can use 1/0 instead of true/false?

Set the default value for switch-active to true

A control should be enabled by default, and disabled only in specific cases. Therefore I suggest setting the default value for the switch-active attribute to true.

Existing ngModel inject to the directive

Hi,

I'm not sure is it intended to work like this?

In the example application there are 3 scopes, and each has it's own $scope.isSelected model. And these are working separately.

What i need is to bind the model to an exsiting value, to do it i modifed the directive and it's usage, i have added :

  template: '<input ng-model="myDirectiveVar">',
  scope: {
    myDirectiveVar: '=',

...

And the usage is :
bs-switch my-directive-var="isSelected"

Is this the only way to pass existing model variable to this directive?

Error message when adding module

Here how I am adding the module to my app:

var theApp = angular.module("theApp", ["sizeFilter", "frameRateFilter", "bitRateFilter", "angularBootstrapNavTree", "ngAnimate", "nvd3", "mgcrea.ngStrap.select", "frapontillo.bootstrap-switch"
]);

When I add this module to my app, I immediately get the following error in my console. I'm assuming there is a possible incompatibility between angular-bootstrap-switch and one of the other modules or libs that I have installed.

Got error on height after build

use follow code:

<input bs-switch
ng-model="advancedSwitch.value"
type="{{advancedSwitch.type}}"
switch-size="{{advancedSwitch.switchSize}}"
switch-label="{{advancedSwitch.switchLabel}}"/>

got follow result after run grunt build:

totally confused.
(P.S. everything is OK under grunt serve)

Missing bootstrap-switch options

Could you add the remaining options from the jQuery plugin (inverse, readonly, disabled, events...)? Or, maybe also/instead allow you to pass a json string into the input attribute and eval that and pass it into the jquery instantiation of bootstrapSwitch? Could make things simpler on your end anyway.

<input bs-switch="{size: 'mini', 'switch-on-color':'primary' }"/>

and then in link:

angular.element(element).bootstrapSwitch(scope.$eval(attrs.bsSwitch));

Open to anything - and at your leisure of course! 😃

Support a wider range of angular, jquery and boostrap versions

Currently, if you want to use latest stable angular, jquery and boostrap versions, you need to force bower resolution. Is there a good reason to depend on exact versions or would it be possible to depend on, for example, angular ^1.2.8?

$destroy handling make angular crash when changing view in angular 1.2.0-rc2

Hello,

The call to

scope.$on('$destroy', function() {
        element.bootstrapSwitch('destroy');
});

Seems to make angular crash during scope cleanup ( when changing/togling view, either with ng-view, ng-if or any other view based directive )

Commenting these lines fixes the issue ( not even sure if there are sides effects because all bootstrapSwitch data are bound to the element, so 'naturally' cleaned up during element removal )

This seems to be caused because the call to bootstrapSwitch's destroy method remove the element from the DOM, messing up with angular scopes cleaning.

Stack :

bs-select won't read ng-model

I assume I'm doing something wrong, but I cannot get the bs-select element to actually sync with the ng-model. I did get past the previous issue, which was that I didn't have the correct .js files included. I have "frapontillo.bootstrap-switch" in my app module list. I have the following css and js files included in my HTML:

bootstrap-switch.min.css
bootstrap-switch.min.js
angular-bootstrap-switch.min.js

Here is the code I am using:

The value is Off when I visit the page. When I click it to turn it on, and then leave and return to the page, it is back Off. I added {{ service.output.rtmp.enabled }} next to it to confirm that the switch is indeed not changing the value of the model.

What else am I possibly missing? I am temporarily using a similar plugin called angular-toggle-switch that I am able to get working, but I would prefer to use your plugin, as it has a richer set of features. I tried to look at the example on this site for guidance, but it's hard to compare to that one, as it uses a different set of file names in the required libraries.

A switch that is not visible on page load will not be properly initialized

Using:
bootstrap-switch: v3.0.2
angular-bootstrap-switch: v0.4.0-alpha.1 - 2014-11-21
angularjs: 1.3.6

If the switch is within a tab that isn't initially visible, then it will not be initialized properly with the value of its ng-model. This is also true with other components that contain/hide the switch like angular-wizard, angular-material tabs (md-tab), etc.

The scope.$watch(attrs.ngModel, function (newValue) { is called properly and sets the state on the element. Later when the element becomes visible, the value is correct but the display state is not.

We're currently working around the issue by setting up an interval which polls to see when the element becomes visible and then makes the call to:

element.bootstrapSwitch('state', newValue === getTrueValue(), true);

This seems to set both the value and display state properly so that they stay in sync, There is likely a better solution.

This does not appear to be covered by an existing test since I was able to clone the project and run the Karma tests with AngularJS 1.3.6. They all passed.

Event Handling

$scope.$watch('isSelected', function() {
$log.info('Selection changed.');
console.log("IS selected")
});

                        $scope.toggleActivation = function() {
                            $log.info('toggle Activation');
                            console.log("toggle selected")
                          $scope.isActive = !$scope.isActive;
                        }

keeping above in controller, none of them fired when checkbox is changed. However when checkbox switch created above 2 function fired but not after that. Any ideas?

Radio button with options

How to use this plugin with radio button? As here http://www.bootstrap-switch.org/examples.html - Radio All Off when turning on one element all others turns to off.
I cen't get it with Your plugin. Here is sample: http://plnkr.co/edit/54ByJKSF1hnWYUH0TMOL?p=preview

model binding disabled when switch not active

Hey there!

Firstly, thanks for the sweet little directive you made! I'm really enjoying it.
I'm not sure if this is desired behaviour, but when I de-activate a switch I can no longer change the switch state via my model data.

I am using switch-active to disable the switch to dis allow user interaction, but I still need to be able to change the model value it is bound to for returning http response data.

Any help or suggestions will be much appreciated =)

Incompatible with Angular 1.3.1

Relies on 1.2.8? bower complains and the directive doesn't display the input

Indeterminate first click always defaults to Yes / True

Right now, the indeterminate state always goes to yes upon first click and must be clicked a second time to go to no.

The indeterminate state should be smart enough to switch to a yes or no upon first click depending on where the user clicks the switch. The current indeterminate example on http://www.bootstrap-switch.org/examples.html is smart enough to work this way.

Disabled but showing value

Is it possible to disable the switch and yet reflect the value of the model?

I have tried setting switch-active to false but it makes the switch turn of even though the underlying boolean reads true.

Furthermore I have been trying to set ng-readonly and ng-disabled with no luck.

First toggle do not change ngModel value

Hey,

Greate direcitve:) I have a small issue, the first toggle do not change the value of ngModel, if I call

controller.$setViewValue(controller.$modelValue);

just after

element.bootstrapSwitch('state', controller.$modelValue || false, true); (line 121)

it works, do that make sense?

-KFIIL

dont work in angular 1.2.6

in the angular-bootstrap-switch.js file.

i add a row in the link function first.
element = $(element);

its work

Remove "template" option in directive

If you remove

template: '<input>',

From your code, it will still work on IE 8, otherwise it doesn't work.

Radio button sample

Could you provide any sample code for radio button implementation (plunkr or something)? I am having a hard time to make this work with radio buttons and could not find a sample code anywhere.

ngModel updates after 3 switches

when the ngModel is initially true and the checkbox is "on", the first time i uncheck it the ngModel does not update but stays true. I have to recheck it and then re-uncheck it to update the ngModel.

Switch animates when first rendered if ngModel attr is true

When the switch is first rendered, if the ngModel attribute resolves to true, the switch animates from the off to on state, since the data binding has moved from false -> true.

Is there any way to stop this happening without disabling animations completely?

Update Bootstrap Switch required version to 3.2.0

Don't forget to add support for the new options handleWidth and labelWidth.
Thanks for your work.

mini switch should be narrower

I am trying to use a mini switch, and I think with min-width in the CSS of 100 px is too wide. See attached image:

I would like this mini switch to be half as wide (horizontally) than it is. It looks more balance and less "skinny".

However, setting the CSS seems to mess up the clickable area of the switch. Can you either update or explain how to make the mini switch 50px min-width instead of 100?

Is it possible to add an ng-click event to the switch?

depending on the id the switch gives to a function I will change something. So I have to watch multiple switches and react on there ids? Is it possible to add a ng-click="doSomething(id1)"? Or is there a better way doing this? Thank you!

Jquery problem

I think the whole idea of making angular directive is to avoid jquery usage...

Update internal API calls for Bootstrap Switch 3

hello,

Bootstrap Switch 3 is going to be released. can you add support for it?

Help getting a Plunk working?

Hi, @frapontillo ! Thanks for the cool directive!

I'm trying to add it to my project, and I'm running into one weird issue. I'm trying to construct a Plunk to demonstrate the problem so I can create an actual issue for it, but I can't quite get the Plunk working. I'm hoping someone can help me fix it so we can have a good starting place for testing issues, etc.

http://plnkr.co/edit/Stx9nVyyR3AdMgD7tHji?p=preview

If you have your console open, you'll see that the bootstrapSwitch() function is undefined.

Thanks in advance for your help!

Cannot disable and toggle value at the same time.

Changing the value of the switch & setting isActive to false at the same time results in only the model value changing with the switch's position being opposite.

assuming the value is false, calling:

$scope.switchValue = true;
$scope.switchActive = false;

will result in the switch being disabled in the 'off' position, while the model value is set to 'on'.

http://plnkr.co/edit/SsWwzJTiMn0cyNLM1Kpt?p=preview

Removing the timeout around element.bootstrapSwitch('state', newValue || false, true); seemed to fix the problem, but I'm unsure of other problems that may be caused by doing so.

Update readme with dependency name

IE:
"add 'frapontillo.bootstrap-switch' to your angular app dependencies"

Clicking the switch should always cause it to toggle

This would match the behavior of http://www.bootstrap-switch.org/

Currently with angular-bootstrap-switch, clicking the visible Yes/No text toggles the switch. But clicking the empty area does nothing. This leads to a confusing user experience.

Doesn't show ON in disabled status

In disabled mode switcher doesn't react on model changes and shows only OFF status.

First toggle do not change ngModel value (UPDATED)

Hi, I have also commented on the previous similar iissue but since it was closed I do not know if it is monitored...
So there is a problem when multiple bs-switches exist...
I found out that the problem is when you try to bind ng-model to an existing property of an object inside an array. If it is not the first element of the array and the property exists, it needs the first toggle cycle for binding to start working. If it is the first element it works no matter what directly

Request: setting HTML inside the 'switch-on/off-text' attribute

It would be great to use Font Awesome as a text input for the switch. For that I would need to use something like this:

<i class="fa fa-check text-success"></i>

in the the 'switch-on/off-text' attribute.