cgarvis / angular-toggle-switch Goto Github PK

I have the toggle switch working as expected im my browser and on android 4.4. However on a android 4.2.2 or 4.3 device the switch jumps back to its previous position right after it is switched. The only way to correctly switch the button is by holding it down a short time and then releasing it again.

Any idea what could cause this behaviour?

controller: function($scope) {

would be better off as:

controller: ['$scope', function($scope) {

because uglification of javascript will break this library (and whatever project that uses it).

https://travis-ci.org/cgarvis/angular-toggle-switch/builds/75115008

Firefox 31.0 (Linux): Executed 1 of 12

Running "karma:unit" (karma) task
Verifying property karma.unit exists in config...OK
File: [no files]
Options: background=false
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Firefox
INFO [Firefox 31.0 (Linux)]: Connected on socket id cJRHDJXTObichwv3iADn
Firefox 31.0 (Linux): Executed 1 of 12
 SUCCESS (0.332 secs / 0.178 secs)
Done, without errors.

Similar to your Bower package would be great if you could add it to NuGet.

Hey - you and JumpLink need to combine your efforts and make a real first class component

https://github.com/JumpLink/angular-toggle-switch.git

Hi, the fact you're using ngMin creates an issue with packaging your directive and then running minification on the entire package instead of including the minified version.

Hi.

I'm unable to use this module. I get this error when I try to change the status of the switcher.

Error: [$compile:nonassign] Expression 'undefined' used with directive 'toggleSwitch' is non-assignable!

I included the angular-toggle-switch.js file and added the module to my app in this way.

var module = angular.module("app", ["ngRoute", "ngResource", "angularFileUpload", "ui.bootstrap", "ui.bootstrap.datetimepicker", "toggle-switch"]);

Where I'm wrong?

I found I had to prefix all the .switch classes with "ats-", as in .ats-switch to avoid this.

In HTML5, "disabled" as boolean attribute.
A input is disabled as long as "disabled" is defined in the attribute, regardless of its value.
http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

Can this logic handle the case

<toggle-switch ng-model="switchStatus" disabled><toggle-switch>

        attrs.$observe('disabled', function(disabled) {
          if(disabled === 'true') {
            isEnabled = false;
          } else {
            isEnabled = true;
          }
        });

How do we update the status to ON/OFF based on the status that we get from API?

Hi. Is master stable ? It seems to work fine for me. There are no tagged versions that support ngModel yet, would be nice :)

Currently it seems that the possible switch values are true and false.
Is it possible to add our own values that are more appropriate to our application?

Below is an example of what would be useful. Note the on-value and off-value fields.

        <toggle-switch
            ng-model="ctrl.model.side"
            on-label="For"
            on-value = "For"
            off-label="Against"
            of-value = "Against">
        <toggle-switch>

So in this case, the value for the 'On' case is "For" rather than true.
Ideally it would be nice to modify the default values for our own applications. Is there a way to do this?

The example page is broken.

Please.

Perhaps it is a difference between angularjs 1.0 and 1.2 but I'm still getting blank labels if the on-label and off-label are not specified in the tag, Meaning $scope.offLabel and $scope.onLabel remain undefined even after the link function is called rather than using the defaults On and Off.

If you are really not going to use two-way binding shouldn't you remove the objects from the scope and use this instead:

      $scope.onLabel = attrs.onLabel || 'On';
      $scope.offLabel = attrs.offLabel || 'Off';

Like I said this may be a difference between 1.0 and 1.2.. or I could just be missing something.

Can I toggle the switch via a function call? In my case, a button is used to control all other button/value, so that when that master button is ON, all other button is ON and vice versa

The copyright notice in LICENSE reads:

Copyright (c) 2013 William L. Bunselmeyer. https://github.com/wmluke/angular-blocks

I assume this license file was copied from another project, and the actual author should be Christopher Garvis.

I changed the template to accept HTML code instead of text at the labels.
I would like to commit my changes.

Is it possible to set on-label and off-label globally?

Is there a way to group some switches as we usually do with radio buttons?

running npm install causes the following warning

npm WARN package.json [email protected] No repository field

my package.json:

  "dependencies": {
    ...
    "angular-toggle-switch": "^1.3.0",
    ...
  }

I assume this is a simple fix of adding the github repo url to a repository field on your package.json?

this toggle switch will support swipe function can you please give the example for this

The property used in the directive is model not ng-model, so the examples in the demo page should be changed to:

<toggle-switch model="switchStatus"><toggle-switch>

The border radius as displayed on the demo page does not appear to be in the angular-..-bootstrap.css file. Is this the intention?

There was a event on-change in release 0.5.2?
I could not get this happening in release 1.2.1?

We're using angular for an android app. On my local, there is no gap. On my Samsung Galaxy S3, there is a 1px-3px gap between the toggle switch and container (see screenshots). I've tried 3 times to close the gap; As soon as I close one gap on the off button a gap will appear on the off button.

Attempt No 1

.toggle-switch .switch-off {
  left: -49%;
}

Attempt No 2

.toggle-switch .knob {
  border: none;
}

Attempt No 3

.toggle-switch .knob {
  border: none;
}

My current CSS:

     .toggle-switch {
    border: 2px solid #626262;
    float: right;
    }
    .toggle-switch span {
    height: 100%;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: normal;
    }
    .toggle-switch .switch-left {
    color: #fff;
    background: #33b5e5;
    text-transform: uppercase;
    }
    .toggle-switch .switch-right {
    color: #000;
    background: #1e6681;
    text-transform: uppercase;
    }

Any ideas on how to fix it so there's no gap on both buttons? Thanks.

there are a conflict with css using https://github.com/yunlzheng/angular-knob

I am using the angular-toggle-switch in my application in a settings dialog. The user can select from a menu to go between panels. I have noticed that when a panel is shown with the toggle switch on it, and the initial value in ng-model is false, the toggle switch animates from on to off. Is it possible to make it so that it shows the "off" value without animation when it's a model change, and with animation when the user clicks to change it?

If you add the attribute disabled="false", the switch is disabled because it's evaluated as a string "false" (which is true). Also when re-enabled, it doesn't remove the disabled class.
Created a plunkr, which I think would be good adding to README.md to help debugging in the future as there is currently no playground.

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

Minification with your code breaks everytihing. Solution: use this:

    controller: ['$scope', function($scope){
      $scope.toggle = function toggle() {
        if(!$scope.disabled) {
          $scope.model = !$scope.model;
        }
      };
    }],

Instead of:

    controller: function($scope) {
      $scope.toggle = function toggle() {
        if(!$scope.disabled) {
          $scope.model = !$scope.model;
        }
      };
    },

Thank You!

No knob label added, but one is added automatically:

HTML:
<toggle-switch ng-model="stat.show"><toggle-switch>

Inspector:
<span class="knob ng-binding" ng-bind="knobLabel">Â&nbsp;</span>

In Chrome:

Refused to execute script from 'https://raw.github.com/cgarvis/angular-toggle-switch/master/angular-toggle-switch.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 

https://github.com/cgarvis/angular-toggle-switch/blob/master/angular-toggle-switch.js#L71

This is because ng-bind-html-unsafe is not not supported any more.
Changing it to ng-bind-html worked but I am not sure if that is the correct solution or not...

Why in your directive the attribute disabled is defined as a string? disabled="false" will disable the switch anyway. It's possible to achieve it with something like this:

 <toggle-switch disabled="{{ (isAdmin) ? '' : 'true' }}" ng-model="lock"></toggle-switch>

But your example with true leaves me thinking that the opposite is possible.

Maybe the local scope property should be = instead of @.

scope: {
    disabled: '=',
     ...
 },

This will give the possibility to disable the switch with a scope variable.

 <toggle-switch disabled="true" ng-model="lock"></toggle-switch>
 <toggle-switch disabled="false" ng-model="lock"></toggle-switch>
 <toggle-switch disabled="!isAdmin" ng-model="lock"></toggle-switch>

Hi! thanks for the great widget :)
Any reason for using model instead of the native ng-model ?

It seems that the only way to toggle disabling of this directive is to add or remove the disabled attribute manually (at least in Chrome/OSX).

ng-disabled does not seem to work at all.

I forked @zauker's demo from Issue #78 which should make any issues clear.

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

The latest version on npmjs.com is 1.2.0

When a <fieldset> is disabled, the spec says that so should it'd descendent form elements.

from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attr-disabled

disabled
If this Boolean attribute is set, the form controls that are its descendants [...] are disabled

Is this an enhancement that could be made?

Is it possible to get other value than true or false? for example
[ng-true-value=""]
[ng-false-value=""]

I have a simple plunk up here :
http://plnkr.co/edit/KOoxF731oMBZ741XtiPN?p=preview

I am unable to watch on the changes. I am guessing it should be possible but I just cant seem to get it working. Am I doing something wrong?

Hi,
Would it be possible to add a callback before the switch is toggled ?
Currently, I load data via Ajax from a DB. There is an boolean attribute for each line of this data, which is the model for each toggle switch. My use case is :
When you click on the toggle, it updates the attribute in DB. My problem is that the toggle is switched before the ajax request is done. In case of a servor error, the toggle is switched let's say to "yes", the ajax return an error, the toggle is switched back to "no".

I'd like to wait for the ajax response before any switch happens. How would you do that ? Watching my data is not useful there.

Thanks.

Would it be possible to add a listener for when the user toggles? This would allow much easier coding when nesting the switch inside of lists.

Clear your cache, go on the demo page and try to turn on/off any button on any browser. It will fail. Suggested resolution: Rollback 0.3.1 until a proper fix.
Thanks!

I haven't been able to get ng-class to work with toggle-switch:

<toggle-switch ng-model="adminStatus" ng-class="{ 'switch-on' : true }" style="margin-bottom: 5px;" class="danger" on-label="Yes" off-label="No"><toggle-switch>

I get errors like:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 24 of the expression [{ 'switch-on' : true } { 'disabled': disabled }] starting at [{ 'disabled': disabled }].

So it's clearly using ng-class to inject the { 'disabled': disabled } but I'm not sure how to add another ng-class expression in with it.

Any ideas?

I need to disable or enable dynamically the toggle switch i tried to use the disabled attribute but it seems that is not working well.

When using angular toggle switch within a form the form's $pristine value is not properly updated.

Is this an angular toggle switch issues or maybe I'm doing something wrong?

Plunker

<form name="infoForm" class="form-horizontal" role="form">
      <toggle-switch model="myModel"></toggle-switch>
</form>

<p>Form Pristine:  {{infoForm.$pristine}}</p>

The registered package in bower not includes the latest merge PR.