ziscloud / angular-bootstrap-toggle Goto Github PK

I'd like to use toggle within a hidden element (eg div) and use it on demand, after the element is made visible. The problem is, that the toggle's size does not fit with its content, due to the fact, that the content's size is 0 when being initiated. Can I trigger some kind of re-initiate? Thanks in advance!

Is there a way to disable the toggle?

When using the Toggle directive the control does not expand its height or width to display the text:

<div class="form-group">
	<label class="col-md-2 control-label">
		Net/Gross
	</label>

	<div class="col-md-10">
		<toggle ng-model="netGrossToggle"
				ng-change="controller.WorksheetAsserts.NetGrossToggle(netGrossToggle)">
		</toggle>
	</div>
</div>

I have used angular-bootstrap-toggle in my Node JS application, when i first run the node application the toggle button is showing in off state even the model value is ture, and after that i reload the page (node js running) the toggle button is shown in on state. What's wrong with this directive ??

I believe this to be an issue of loading partial translation files. So the data isn't loaded when you grab it, but is loaded async later.
See http://i.imgur.com/F03133N.jpg for the problem.

Code used:

<toggle ng-model="jackOfAllTradesToggle" on="{{'JACK_OF_ALL_TRADES' | translate}}" off="{{'JACK_OF_ALL_TRADES' | translate}}" onstyle="btn-success" offstyle="btn-danger"></toggle>

I've verified that it does not exist when the files are loaded locally: http://plnkr.co/edit/KoxNXyUnN4te54yjnwrH?p=preview

plnkr does not allow loading partial translation files or I'd provide a reproduction for that.

Please let me know if I can provide further details.

Is it possible to choose the init state please ? Directly in the view I mean, not in the controller (which is what I actually do)

How do i set the width myself ?

I have implemented angular-bootstrap-toggle for show/hide layers of data with OpenStreetMaps and OpenLayers3 and the switch functionality is working fine, but I can't set a lower size for the component.
I'm using the size property as the documentation says.
Many thanks

In the documentation you recommend to use the CDN addresses of the .min.css and .min.js files.

But they both give me 404 errors:
https://gitcdn.github.io/angular-bootstrap-toggle/{version}/dist/angular-bootstrap-toggle.min.css

I have below code where I want javascript function to be called when I toggle.

system.complianceCategory can be either zero or one. When we click on toggle, I see toggle on/offs first then it calls to function, so In function it reverse the value of system.complianceCategory.

Is there anyway where before toggle on/offs, I get the original system.complianceCategory value.

I would like to disable the button if the user has no rights to change it?

Hello,

I am trying to use this module in datatable so i have put <toggle ng-model="toggleValue" ng-change="changed()" on="Enabled" off="Disabled"></toggle> line in angular component like

this.dTColumnBuilder.newColumn('active').withTitle('Active').renderWith(function(data, type, full, meta) {
                return '<toggle ng-model="toggleValue" ng-change="changed()" on="Enabled" off="Disabled"></toggle>';
            }),

so problem is directive is not working in angular component. however if i put <toggle ng-model="toggleValue" ng-change="changed()" on="Enabled" off="Disabled"></toggle> in view, it is working

Hey, why is this done? When I add the toggle in my html and sett the size to xs - it will ignore this and set another, calculated, height of the element. If I remove this - it works according to the size I specified.

if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') {
$scope.wrapperStyle.height = wrapperComputedHeight + 'px';
} else {
$scope.wrapperStyle.height = wrapperHeight + 'px';
}

The last versión in npm is 0.1.2. please if you could update the package it will be great!

I'd like set ON the toggle from controller if value is 1 and OFF if value is 0.
Could you give me some help ? Thanks

Hello,

I am trying to use toggle directive in for loop and i have also set dynamic ng-model but still it toggle all buttons available in loop. it should toggle single button not all

Thanks

Custom class doesn't set... Is style property deprecated?

When using the on and off attributes to set labels with relatively long text (10 to 20 chars), the width of the toggle wrapper doesn't adjust properly.

Example:

<toggle ng-model="$ctrl.someValue" on="My Long Toggle" off="Is Not Well Adjusted"></toggle>

This is because the width of the toggleWrapper div is based on offsetWidth of the on and off labels, which doesn't include the part of the label that may be clipped and not visible, which is the case with labels in toggle.

Suggestion: Use the scrollWidth property instead

Also: add 24px to adjust for the padding...

<toggle onstyle="{{'btn-success'}}" ng-model="$ctrl.myValue"></toggle>

triggers a $compile:nodomevents error.

while

<toggle offstyle="{{'btn-default'}}" ng-model="$ctrl.myValue"></toggle>

works without any issue.

This is because AngularJS prevents setting on* attributes (like onload, onclick, etc.) with an AngularJS expression.

Using x-onstyle or data-onstyle doesn't change the behavior.

The only fix to this would be to change the name of this attribute, like style-on. Any other idea?

PS: Behavior seen with AngularJS 1.7.2

Hi,

Is there plans to build the latest code into a new version available via npm. The latest available via npm / webpack is 0.1.2 seen on the right hand side here https://www.npmjs.com/package/angular-bootstrap-toggle

Bower is able to see the 0.1.3 release however.

Regards,
Mark

node_modules\bootstrap-toggle\js\bootstrap-toggle.min.js:8 Uncaught ReferenceError: jQuery is not defined

When using size with the toggle, the width and height that are auto calculated are for btn-md. It seems like the issue is because the computeStyle function is being called before the size attributes are applied to the DOM.

Here is sample code to reproduce:

<toggle ng-model="model" size="btn-xs"></toggle>
<button class="btn btn-xs btn-primary">Size of .btn-xs</button>

And here is a plunker showing the issue
https://plnkr.co/edit/ps1b0St62YSLK9e7Mu8n

Any chance of getting swipe capability on mobile devices? Or is there some simple trick I'm missing there? Thanks!

You can see this behavior on the issue I created for translations: http://embed.plnkr.co/KoxNXyUnN4te54yjnwrH/

Would you please release the version 0.4.0 for bower?

Thanks