实现 Bootstrap Angular 切换答案

【问题标题】：Implementing Bootstrap Angular toggle实现 Bootstrap Angular 切换
【发布时间】：2017-11-24 19:31:04
【问题描述】：

我是 Angular 新手，一直在尝试在我的网站上实现 Bootstrap Angular toggle 功能/模块。

链接网站上有文档，但找不到完整的工作示例（例如小型独立小提琴）。我根本无法让这个功能工作，所以我加载了资源，并对我一直在尝试的东西做了一个 js-fiddle：

或者如果您更喜欢只看代码：

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

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

任何熟悉 Angular 的人都可能在 10 秒内解决这个问题，但我才刚刚开始，似乎找不到可以学习的好例子。
我在哪里错了，html调用或依赖声明（或两者）？

【问题讨论】：

如果有人需要一个简单的例子，请更新小提琴现在可以使用

标签： angularjs twitter-bootstrap toggle

【解决方案1】：

Angular Bootstrap Toggle 官方链接 http://ziscloud.github.io/angular-bootstrap-toggle/

添加依赖项

在视图中添加以下代码

<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>

在控制器上添加以下代码以自定义预设切换。

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

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

【讨论】：

【解决方案2】：

我发现您的小提琴中引用了引导切换的 cdn 地址不正确。

当我在引导切换网站上时，我从 chrome 开发工具中获取了正确的地址来引用 js 和 css 文件。

我认为下载引导切换文件并从您的应用程序本地引用它们更安全。

将以下内容粘贴到您的小提琴中，它会起作用。

  

  <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>

【讨论】：

我明白了，我忘记将链接中的“{version}”与我正在使用的角度版本（在本例中为 1.6.4）交换。好的，非常感谢您抽出宝贵的时间，非常感谢。
实际上，这种交换可能不起作用，但我明白了，使用适当的资源
将上述脚本和样式表文件（github 文件）添加到我的 Angular 项目 V1.5.8 工作。