Implementing Bootstrap Angular toggle

Question

I'm new to Angular, and have been trying to implement the Bootstrap Angular toggle feature/module on my website.

There is documentation on the linked website, but full working examples (e.g. small independent fiddles) are nowhere to be found. I can't get this feature working at all, so I've loaded up the resources, and made a js-fiddle of what I've been trying:

example-fiddle

or if you prefer to just look at the code:

<script>angular.module('myApp', ['ui.toggle']);</script>

<div ng-app="myApp">
   <toggle ng-model="toggleValue" ng-change="changed()"></toggle>
</div>

Anyone familiar to Angular can probably work this out in 10 seconds, but I've just started and can't seem to find good examples to learn from.
Where am I wrong here, html call or dependency declaration (or both)?

updated the fiddle to work now, if anyone needs a simple example — Dilfa
– Dilfa, Commented Jun 21, 2017 at 21:05

Prinay Panday · Accepted Answer · 2017-06-21 19:45:49Z

3

I see that the cdn addresses for bootstrap toggle are referenced incorrectly in your fiddle.

I grabbed the correct addresses to reference the js and css file from chrome dev tools when on the bootstrap toggle website.

I think it's safer to download the bootstrap toggle files and reference them locally from your app.

Paste the following in your fiddle and it will work.

  

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <html>
    <link href="https://ziscloud.github.io/angular-bootstrap-toggle/css/angular-bootstrap-toggle.min.css"
                    rel="stylesheet">            
    <script src="https://ziscloud.github.io/angular-bootstrap-toggle/js/angular-bootstrap-toggle.min.js"></script>

    <script>angular.module('myApp', ['ui.toggle'])</script>
    <body ng-app="myApp">
      <div>
        <toggle ng-model="toggleValue" ng-change="changed()"></toggle>
        It's not working! What should I do?
      </div>
    </body>

    </html>

answered Jun 21, 2017 at 19:45

Prinay Panday

2262 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dilfa Over a year ago

I see, I forgot to swap "{version}" in the link with the angular version that I'm using (in this case, 1.6.4). Well, thank you very much for your time, I appreciate it.

Dilfa Over a year ago

actually, this swapping may not work, but I got the point, use the appropriate resources

Ahsan Over a year ago

adding above mentioned script and stylesheet files(github ones) to my angular project V1.5.8 worked.

pvrforpranavvr · Accepted Answer · 2018-03-12 07:35:36Z

Angular Bootstrap Toggle official link http://ziscloud.github.io/angular-bootstrap-toggle/

Add dependencies

Add below code on view

<toggle size="btn-sm"  ng-model="toggleValue.operationMode1" ng-click="doSwitch(toggleValue.operationMode1)" on="Auto" off="Manual" onstyle="btn-success" offstyle="btn-danger"></toggle>

<toggle size="btn-sm"  ng-model="toggleValue.operationMode2" ng-click="doSwitch(toggleValue.operationMode2)" on="ON" off="OFF" onstyle="btn-success" offstyle="btn-danger"></toggle>

<toggle size="btn-sm"  ng-model="toggleValue.operationMode3" ng-click="doSwitch(toggleValue.operationMode3)" on="Enable" off="Disable" onstyle="btn-success" offstyle="btn-danger"></toggle>

Add below code on controller to custom preset toggle.

$scope.toggleValue={
  operationMode1 :true,
  operationMode2 :false,
  operationMode3 :true
}

$scope.doSwitch = (function (toggleStatus) {
  console.log(toggleStatus);
// Your logic here
});

Collectives™ on Stack Overflow

Implementing Bootstrap Angular toggle

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related