Question

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

链接网站上有文档，但无法找到完整的工作示例（例如小型独立小提琴）。我根本无法使用这个功能，所以我已经加载了资源，并且创造了我一直在努力的小事：

或者如果您只想查看代码：

<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 toggle的cdn地址。

在bootstrap切换网站上，我抓住了正确的地址来引用chrome dev工具中的js和css文件。

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

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

＆＃13;

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

＆＃13;

Answer 2

Angular Bootstrap切换官方链接 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切换

2 个答案: