实施 Bootstrap Angular 切换

Question

我是 Angular 的新手，一直在尝试在我的网站上实施 Bootstrap Angular toggle feature/module。

链接网站上有文档，但找不到完整的工作示例（例如小型独立 fiddles）。我根本无法使用此功能，所以我已经加载了资源，并制作了一个 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 调用或依赖声明（或两者）？

Answer 1

我看到 bootstrap 切换的 cdn 地址在您的 fiddle 中引用不正确。

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

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

将以下内容粘贴到您的 fiddle 中即可。

  

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

Answer 2

AngularBootstrap切换官方link 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
});

实施 Bootstrap Angular 切换

Implementing Bootstrap Angular toggle

toggle

twitter-bootstrap

angularjs