如何创建角JS ON-OFF开关

我试图参照the link 如何创建角JS ON-OFF开关

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

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

它应该具有编辑（开/关）功能。

任何人都可以提出为什么css文件没有工作或有任何其他方式我可以做到这一点。

来源

2017-02-23 jubi

请参阅：http://codepen.io/adamthomas/pen/uolIA –

我正在寻找代码项目文件中提到的椭圆形按钮。我可以有类似的吗？ – jubi

您需要修改提供的CSS文件以指向您网站上的字体位置。 –

我从https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.switch { 
    position: relative; 
    display: inline-block; 
    width: 60px; 
    height: 34px; 
} 

.switch input {display:none;} 

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 26px; 
    width: 26px; 
    left: 4px; 
    bottom: 4px; 
    background-color: white; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

input:checked + .slider { 
    background-color: #2196F3; 
} 

input:focus + .slider { 
    box-shadow: 0 0 1px #2196F3; 
} 

input:checked + .slider:before { 
    -webkit-transform: translateX(26px); 
    -ms-transform: translateX(26px); 
    transform: translateX(26px); 
} 

/* Rounded sliders */ 
.slider.round { 
    border-radius: 34px; 
} 

.slider.round:before { 
    border-radius: 50%; 
} 
</style> 
</head> 
<body> 

<h2>Toggle Switch</h2> 

<label class="switch"> 
    <input type="checkbox"> 
    <div class="slider"></div> 
</label> 

<label class="switch"> 
    <input type="checkbox" checked> 
    <div class="slider"></div> 
</label><br><br> 

<label class="switch"> 
    <input type="checkbox"> 
    <div class="slider round"></div> 
</label> 

<label class="switch"> 
    <input type="checkbox" checked> 
    <div class="slider round"></div> 
</label> 

</body> 
</html>

来源

2017-02-23 06:35:54

我无法使用buttons.my req获得相同的外观在exapmle – jubi

您是否从以上链接引用w3schools.com/howto/howto_css_switch.asp –

您的帮助复制的代码，我在粘贴链接相同的代码

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script> 
 
    <script data-require="[email protected]*" 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>

来源

2017-02-23 06:43:22

我已删除了第二行参考。然后将font-awesome.min的对象复制到style.css中 – jubi

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

来源

2017-02-23 07:03:08

如何创建角JS ON-OFF开关

回答

相关问题