我正在尝试通过引用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文件不起作用或者我还能做任何其他方式。
答案 0 :(得分:2)
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" />
答案 1 :(得分:0)
为了您的帮助,我会粘贴相同的链接代码
<!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;
答案 2 :(得分:0)
<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>