jumplink / angular-toggle-switch Goto Github PK
View Code? Open in Web Editor NEWThis project forked from cgarvis/angular-toggle-switch
AngularJS Toggle Switch
Home Page: http://jumplink.github.io/angular-toggle-switch/
License: MIT License
This project forked from cgarvis/angular-toggle-switch
AngularJS Toggle Switch
Home Page: http://jumplink.github.io/angular-toggle-switch/
License: MIT License
Hello,
I am trying to replace between the On and Off. How can I do it?
Thanks
Can you please publish the module on npmjs.com?
Thanks!
I did the bower install angular-bootstrap-toggle-switch --save but that didn't save the bootstrap style how do I solve this?
I try
<div class="col-md-3" ng-if="true">
<toggle-switch model="someModel" html="true" class="switch-danger"
on-label='<i class="fa fa-trash-o"></i>'
off-label='<i class="fa fa-trash"></i>'>
<toggle-switch>
</div>
And someModel not updated if toggle switched.
Hi
Is it possible to catch the click event and run a custom callback?
When I tried to set size of the switch to different than default, I found there is no CSS specs for classes described on the demo page.
<toggle-switch ng-model="onPause" class="switch-success switch-mini"><toggle-switch>
Both "switch-success" and "switch-mini" (and others) are missing from css files in the bower package.
The demo page also says the model attribute is named as "model" while this throws exception. The right attr name should be "ng-model".
Slight issue with the switch in a modal. Left hand border missing. See attached image.
Am using the angular-modal-service.
Any ideas?
View markup is as per: -
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="formAgencyPost" class="form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="testSwitch" class="control-label col-sm-4 col-lg-3">Test switch</label>
<div class="col-sm-8 col-lg-6">
<toggle-switch id="testSwitch"
name="testSwitch"
data-model="testSwitch"
class="switch-success"
on-label="true"
off-label="false"
required="required">
</toggle-switch>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" ng-click="close()" class="btn btn-primary">OK</button>
<button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
</form>
</div>
</div>
</div>
On the demo page http://jumplink.github.io/angular-toggle-switch/ in the Sizes example the example code says to use the switch-default class for a large toggle where it should say switch-large.
I'm using your forked version for support of 'isDisabled' -
I've tried
<toggle-switch is-disabled="disabled" ...>
</toggle-switch>
and
<toggle-switch is-disabled="true" ...>
</toggle-switch>
Neither seem to work - the demo page doesn't appear to disabled it either ?
Hi !
On this page : http://jumplink.github.io/angular-toggle-switch/
Bower install link :
bower install angular-toggle-switch --save
refers to another similar plugin : https://github.com/cgarvis/angular-toggle-switch
You should replace it with the correct one :
bower install angular-bootstrap-toggle-switch --save
Seems like scope.onChange();
from line 50 should be moved inside the check for disabled state. At the moment even if I make switch disabled it still toggles ng-model value. Also disabled switches still have focused border.
could you add this to nuget please?
Hi,
its possible to have no text label inside the toggle-switch?
I had some issues where the knob label when no value was supplied appeared as ร. I noticed that in the implementation that the default attrs.knobLabel = '\u00a0';, however, in the minified version it is just a space " ". I was able to resolve the issue by using the non-minified file, but you should make sure your minified version doesn't drop the unicode.
code download from bower
Since ng-disabled directive is not present Iam not able to dynamically disable the switch with any $scope variable.
Hello,
First, thanks for this module.
I need to specify a class for each "side/span" of the element. Actually, you can only specify the background color of the "On" element and I want to specify a background color for the "Off" element, so I introduced on-class and off-class tags. Here are the changes I made.
Perhaps it will help someone.
In angular-toggle-switch.js
``
angular.module('toggle-switch', ['ng']).directive('toggleSwitch', ['$compile', function($compile) {
return {
restrict: 'EA',
replace: true,
require:'ngModel',
scope: {
isDisabled: '=',
onLabel: '@',
offLabel: '@',
knobLabel: '@',
html: '=',
onChange: '&',
onClass: '@',
offClass: '@'
},
template:
'<div class="ats-switch" ng-click="toggle()" ng-keypress="onKeyPress($event)" ng-class="{ \'disabled\': isDisabled }" role="switch" aria-checked="{{!!model}}">' +
'<div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
'<span class="switch-left"></span>' +
'<span class="knob"></span>' +
'<span class="switch-right"></span>' +
'</div>' +
'</div>',
compile: function(element, attrs) {
if (angular.isUndefined(attrs.onLabel)) {
attrs.onLabel = 'On';
}
if (angular.isUndefined(attrs.onClass)) {
attrs.onClass = '';
}
if (angular.isUndefined(attrs.offLabel)) {
attrs.offLabel = 'Off';
}
if (angular.isUndefined(attrs.offClass)) {
attrs.offClass = '';
}
if (angular.isUndefined(attrs.knobLabel)) {
attrs.knobLabel = '\u00a0';
}
if (angular.isUndefined(attrs.isDisabled)) {
attrs.isDisabled = false;
}
if (angular.isUndefined(attrs.html)) {
attrs.html = false;
}
if (angular.isUndefined(attrs.tabindex)) {
attrs.tabindex = 0;
}
return function postLink(scope, iElement, iAttrs, ngModel) {
iElement.attr('tabindex', attrs.tabindex);
scope.toggle = function toggle() {
if (!scope.isDisabled) {
scope.model = !scope.model;
ngModel.$setViewValue(scope.model);
scope.onChange();
}
};
var spaceCharCode = 32;
scope.onKeyPress = function onKeyPress($event) {
if ($event.charCode == spaceCharCode && !$event.altKey && !$event.ctrlKey && !$event.metaKey) {
scope.toggle();
$event.preventDefault();
}
};
ngModel.$formatters.push(function(modelValue) {
return modelValue;
});
ngModel.$parsers.push(function(viewValue) {
return viewValue;
});
ngModel.$viewChangeListeners.push(function() {
scope.$eval(attrs.ngChange);
});
ngModel.$render = function() {
scope.model = ngModel.$viewValue;
};
var bindSpan = function(span, html) {
span = angular.element(span);
var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind';
// remove old ng-bind attributes
span.removeAttr('ng-bind-html');
span.removeAttr('ng-bind');
if (angular.element(span).hasClass("switch-left")) {
span.attr(bindAttributeName, 'onLabel');
span.attr('ng-class', 'onClass');
}
if (span.hasClass("knob"))
span.attr(bindAttributeName, 'knobLabel');
if (span.hasClass("switch-right")){
span.attr(bindAttributeName, 'offLabel');
span.attr('ng-class', 'offClass');
}
$compile(span)(scope, function(cloned, scope) {
span.replaceWith(cloned);
});
};
// add ng-bind attribute to each span element.
// NOTE: you need angular-sanitize to use ng-bind-html
var bindSwitch = function(iElement, html) {
angular.forEach(iElement[0].children[0].children, function(span, index) {
bindSpan(span, html);
});
};
scope.$watch('html', function(newValue) {
bindSwitch(iElement, newValue);
});
};
}
};
}]);
``
I add the following line in the CSS (to be customized)
.ats-switch span.btn-primary { background-color: #286090; border-color: #204d74; } .ats-switch span.btn-success { background-color: #5cb85c; border-color: #4cae4c; } .ats-switch span.btn-info { background-color: #5bc0de; border-color: #46b8da; } .ats-switch span.btn-warning { background-color: #f0ad4e; border-color: #eea236; } .ats-switch span.btn-danger { background-color: #d9534f; border-color: #d43f3a; }
And this is how I use it
<toggle-switch ng-model="user.is_active" on-label="Active" on-class="btn-success" off-label="Inactive" off-class="btn-danger"> </toggle-switch>
I just implemented the angular-toggle-switch which works very well however I just noticed that none of my bootstrap modals work. If I remove the code for angular-toggle-switch everything works properly again.
It seems that when you have two toggles on a panel, which both link to the same object but different properties of that object, when you initialise the page, the second toggle will always have the same value as the first toggle, regardless of parameter values.
Switching and saving it around still works like intended (saves to the correct parameter).
Hi,
I wish I could use your plugin in replacement of the most famous one (https://github.com/frapontillo/angular-bootstrap-switch) because it has no dependency to jquery. The point I'm stuck on is the integration in a form. I'm using a switch for a classical "I Agree" YES/NO which is part of other fields. I want form validate button to be active only when all fields validity is true. To achieve this, I need the switch to be an input (checkbox) element (it can be hidden) but I don't see any in the generated DOM. Does anyone already integrate toggle switch in a form the angular way ? Thanks for telling me if it's out of the scope of this plugin or if it's something lots of users would like !
I have 4 switches on one page, all in the $scope.settings model. All the switches have an ng-change='changeShopSettings()' attribute, so every time a switch is changed I expect that my settings will be saved. But the ng-change looks not working. Even when I try ng-change="console.log('test')", I get nothing in my console.
<toggle-switch ng-model="settings.showShop" on-label="Aan" off-label="Uit" ng-change="changeShopSettings()"></toggle-switch>
$scope.settings = {};
$scope.changeShopSettings = function(){
console.log("changeShopSettings");
$http({
method: 'POST',
url: '/winkelier/shop-settings',
data: {
shopId: $scope.shopId,
showShop: $scope.settings.showShop,
showAllProducts: $scope.settings.showAllProducts,
sendProducts: $scope.settings.sendProducts,
isDropShipper: $scope.settings.isDropShipper
}
}).then(function successCallback(response){
console.log("settings saved", response);
}, function errorCallback(response){
console.log("ERROR", response);
});
}
Tried also with al $scope.watchCollection("settings"), but that doesn't work too.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.