Question

我正在尝试通过引用the link

来创建ON-OFF开关

这里我不能在index.html文件中使用FontAwesome引用，我所做的是我在我的项目中复制了font-awesome-css文件。但是没有显示开关ON-OFF按钮。

这里我删除了来自index.html的引用和font-awesome.min.css的内容被复制到我的style.css文件中我的要求是根据模型值（布尔值）创建ON-OFF开关。

它应该有编辑（ON / OFF）功能。

任何人都可以建议为什么css文件不起作用或者我还能做任何其他方式。

Answer 1

Fontawesome简单开关

<style>
     .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        i.active {
            color: #5cb85c;
        }

        i.inactive {
            color: #d9534f;
        }
    </style> 

<i class="fa fa-toggle-on" ng-class="isActive?'active':'fa-rotate-180 inactive'" ng-click="isActive=!isActive" />

“isActive”（bool）是开关状态

Answer 2

为了您的帮助，我会粘贴相同的链接代码

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
  <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style rel="stylesheet" >
  /* Styles go here */

.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
  </style>
  
  <script >
  // Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
  
  $scope.init = function(){
    $scope.status = true;
  }
  
  $scope.changeStatus = function(){
    $scope.status = !$scope.status;
  }
  
})
</script>
</head>

<body ng-app="switchdemo">
  <h1>On Off switch using Angular JS</h1>
  <div ng-controller="DemoController" ng-init="init()">
    <div class="well">
      <i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
    </div>
    <pre>{{ status }}</pre>
  </div>
</body>

</html>

＆＃13;

Answer 3

<html lang="en">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script language="javascript">
    angular
      .module('myApp', ['ngMaterial'])
      .controller('switchController', switchController);

    function switchController($scope) {
      $scope.data = {
        switch1: true
      };
      $scope.message = 'false';
      $scope.onChange = function(state) {
        $scope.message = state;
      };
    }
  </script>
</head>

<body ng-app="myApp">
  <div id="switchContainer" ng-controller="switchController as ctrl" layout="column" ng-cloak>
    <md-switch ng-model="data.switch1" aria-label="Switch 1">
      Switch 1: {{ data.switch1 }}
    </md-switch>

  </div>
</body>

</html>

如何创建Angular JS ON-OFF开关

3 个答案: