Как создать Angular JS ON-OFF Switch

Я пытаюсь создать переключатель ON-OFF, ссылаясь на ссылка

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

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

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

Может ли кто-нибудь предположить, почему файл css не работает, или есть ли другой способ сделать это.


css angularjs angular-ui-bootstrap toggleswitch fontawesome-4.4.0
person jubi    schedule 23.02.2017    source источник
comment
Обратитесь к этому: codepen.io/adamthomas/pen/uolIA   -  person Akshay Tilekar    schedule 23.02.2017
comment
Я ищу кнопку овальной формы, упомянутую в файле проекта кода. можно мне подобный.   -  person jubi    schedule 23.02.2017
comment
вам нужно изменить предоставленный файл CSS, чтобы он указывал на расположение шрифта на вашем сайте.   -  person Sachila Ranawaka    schedule 23.02.2017
comment
@jubi измените css, как хотите   -  person Akshay Tilekar    schedule 23.02.2017
comment
Вы ссылались на w3schools.com/howto/howto_css_switch.asp   -  person Lini Susan V    schedule 23.02.2017
comment
@sachilaranawaka: я не понял. извините   -  person jubi    schedule 23.02.2017
comment
проверьте этот ответ stackoverflow.com/questions/14366158/   -  person Sachila Ranawaka    schedule 23.02.2017
comment
@sachilaranawaka: документация недоступна   -  person jubi    schedule 23.02.2017
comment
@Lini: для меня это обычный флажок. я скопирую свой код.   -  person jubi    schedule 23.02.2017
comment
‹label class=switch› ‹input type=checkbox class= ползунок вокруг › ‹/label› это мое мнение.   -  person jubi    schedule 23.02.2017
comment
@jubi, вы также должны добавить соответствующий CSS. Проверьте код в разделе «Попробуйте», помимо этого w3schools.com/howto/tryit .asp?filename=tryhow_css_switch   -  person Lini Susan V    schedule 23.02.2017
comment
‹label class=switch› ‹input type=checkbox class= ползунок вокруг › ‹/label› это мое представление.   -  person jubi    schedule 23.02.2017
comment
Css также копируется в файл style.css   -  person jubi    schedule 23.02.2017
comment
@sachilaranawaka: в моем style.css отсутствовала ссылка на шрифт. Я включил шрифт в свой проект и дал ссылку. Но до сих пор проблема не решена   -  person jubi    schedule 23.02.2017
comment
@sachilaranawaka: вы были правы, проблема была со шрифтом. Из-за проблемы с кэшированием изменения файлов шрифтов не были отражены в моем решении. Спасибо. здесь по умолчанию он активен, я хочу установить статус активным на основе значения модели (bool)   -  person jubi    schedule 23.02.2017
comment
упс. даже не подумал о подвохе :D.   -  person Sachila Ranawaka    schedule 23.02.2017
comment
Можете ли вы помочь мне условно показать включение/выключение переключателя на основе значения модели. здесь по умолчанию ‹i class=fa fa-toggle-on active ng-if=status == true это активно. я хочу установить активный, если vm.model.pp = true и неактивный, если он ложный @sachilaranawaka   -  person jubi    schedule 23.02.2017
comment
отпишись что пробовал   -  person Sachila Ranawaka    schedule 23.02.2017
comment
‹i class=fa fa-toggle-on active data-ng-if=vm.model.isparent == true ›‹/i› ‹i class=fa fa-toggle-on fa-rotate-180 неактивные данные-ng- if=vm.model.isparent == false›‹/i›   -  person jubi    schedule 23.02.2017

Ответы (2)


arrow_upward
6
arrow_downward

Потрясающий простой переключатель

<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) — это статус переключателя введите здесь описание изображения

person Rajeev    schedule 13.06.2018

arrow_upward
1
arrow_downward

Я скопировал код с 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>
person Lini Susan V    schedule 23.02.2017
comment
Я не могу использовать кнопки. Моя задача - получить такой же внешний вид в примере. - person jubi; 23.02.2017
comment
Вы ссылались на w3schools.com/howto/howto_css_switch.asp - person Lini Susan V; 23.02.2017