Как создать переключатель Угловая JS ON-OFF

Я пытаюсь создать переключатель ON-OFF со ссылкой the link Как создать переключатель Угловая JS ON-OFF

Здесь я не могу использовать ссылку FontAwesome в файле index.html и то, что я сделал это я есть скопировал файл font-awesome-css в моем проекте. Но кнопка включения ON-OFF не отображается.

Здесь я удалил ссылку из index.html и содержание шрифта awesome.min.css копируется на мой style.css файл Мое требование создать переключатель ON-OFF на основе стоимости модели (Boolean).

и он должен иметь функцию редактирования (ВКЛ/ВЫКЛ) в нем.

Может кто-нибудь предположить, почему файл 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

Я не могу использовать кнопки.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

из приведенной выше ссылки, я удалил вторую строку ссылки. И скопировал контур шрифта-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

ответ

Смежные вопросы