Как условно применять стили CSS в AngularJS?
Q1. Предположим, я хочу изменить внешний вид каждого "элемента", который пользователь отмечает для удаления до нажатия основной кнопки" Удалить". (Эта немедленная визуальная обратная связь должна устранить необходимость в пресловутом " вы уверены?" диалоговое окно.) Пользователь установит флажки, чтобы указать, какие элементы должны быть удалены. Если флажок снят, этот элемент должен вернуться к своему обычному виду.
каков наилучший способ применить или удалить стиль CSS?
Q2. Предположим, я хочу позволить каждому пользователю персонализировать представление моего сайта. Е. Г., выбрать из фиксированного набора размеров шрифтов, позволяют определяемые пользователем цвета текста и фона и т. д.
каков наилучший способ применения стиля CSS, который пользователь выбирает/вводит?
13 ответов
Angular предоставляет ряд встроенных директив для манипулирования стилем CSS условно / динамически:
- ng-class - используйте, когда набор стилей CSS статичен / известен заранее
- ng-style - используйте, когда вы не можете определить класс CSS, потому что значения стиля могут изменяться динамически. Думайте programmable управление типа ценности.
- НГ-шоу и ng-hide - используйте, если вам нужно только показать или скрыть что-то (изменяет CSS)
- ng-if - новое в версии 1.1.5, используйте вместо более подробного ng-переключателя, если вам нужно только проверить одно условие (изменяет DOM)
- ng-переключатель - используйте вместо использования нескольких взаимоисключающих ng-шоу (изменяет DOM)
- ng-disabled и ng-readonly - используйте для ограничения поведения элемента формы
- ng-animate - новое в версии 1.1.4, используйте, чтобы добавить CSS3 переходы / анимации
обычный "угловой способ" включает привязку свойства модели / области к элементу пользовательского интерфейса, который будет принимать пользовательский ввод / манипулирование (т. е. использовать ng-модель), а затем связывает это свойство модели с одна из встроенных директив, упомянутых выше.
когда пользователь изменяет пользовательский интерфейс, Angular автоматически обновит связанные элементы на странице.
Q1 звучит как хороший случай для ng-класса - стиль CSS может быть захвачен в классе.
ng-class принимает" выражение", которое должно оценивать одно из следующих:
- строка имен классов, разделенных пробелами
- массив класса имена
- карта / объект имен классов для булевых значений
предполагая, что ваши элементы отображаются с помощью ng-repeat над некоторой моделью массива, и что когда флажок для элемента установлен, вы хотите применить pending-delete
класс:
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
... HTML to display the item ...
<input type="checkbox" ng-model="item.checked">
</div>
выше мы использовали ng-class expression type #3-a map / object of class names to boolean values.
Q2 звучит как хороший случай для ng-стиля - Стиль CSS динамичен, поэтому мы не можем определите класс для этого.
ng-style принимает "выражение", которое должно оцениваться как:
- карта / объект имен стилей CSS для значений CSS
для надуманного примера предположим, что пользователь может ввести имя цвета в текстовое поле для цвета фона (выбор цвета jQuery был бы намного лучше):
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">
Скрипка для обоих из вышеперечисленных.
Скрипка также содержит пример из ng-show и ng-hide. Если флажок установлен, в дополнение к цвету фона становится розовым, отображается некоторый текст. Если в текстовое поле введено "red", div становится скрытым.
я нашел проблемы при применении классов внутри таблица элементы, когда у меня был один класс, уже примененный ко всей таблице (например, цвет, примененный к нечетным строкам <myClass tbody tr:nth-child(even) td>
). Кажется, что, когда вы осмотрите элемент Инструменты Разработчика на element.style
не имеет назначенный стиль. Поэтому вместо использования ng-class
, Я пробовал использовать ng-style
, и в этом случае новый атрибут CSS появляется внутри element.style
. Этот код отлично работает для я:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
аргумент myVar это то, что я оцениваю, и в каждом случае я применяю стиль к каждому <td>
в зависимости от аргумент myVar значение, которое перезаписывает текущий стиль, применяемый классом CSS для всей таблицы.
обновление
если вы хотите применить класс к таблице, например, при посещении страницы или в других случаях, вы можете использовать эту структуру:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
в основном, что нам нужно активировать ng-class - класс для применения и утверждение true или false. правда применяет класс и false не делает. Итак, здесь мы имеем две проверки маршрута страницы и или между ними, так что если мы в /route_a
или мы в route_b
, the активный класса.
это работает только с логической функцией справа, которая возвращает true или ложный.
Итак, в первом примере,ng-style обусловлено тремя заявлениями. Если все они ложны, стиль не применяется, но, следуя нашей логике, по крайней мере один будет применен, поэтому логическое выражение проверит, какое сравнение переменных истинно, и поскольку непустой массив всегда истинен, это оставит массив в качестве возврата и только с одним истинным, учитывая, что мы используем или для всего ответа, стиль оставшийся будет прикладная.
кстати, я забыл дать вам функцию isActive ():
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
НОВОЕ ОБНОВЛЕНИЕ
здесь у вас есть что-то, что я нахожу действительно полезным. Когда вам нужно применить класс В зависимости от значения переменной, например, значок в зависимости от содержания div
, вы можете использовать следующий код (очень полезно в ng-repeat
):
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
иконы шрифт Удивительный
Это хорошо работает, когда ng-класс не может использоваться (например, при стилизации SVG):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(Я думаю, вам нужно быть на последнем нестабильном угловом, чтобы использовать ng-attr -, я в настоящее время на 1.1.4)
я опубликовал статью о работе с AngularJS+SVG. В нем говорится об этом и многих других вопросах. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS
span class="circle circle-{{selectcss(document.Extension)}}">
и код
$scope.selectcss = function (data) {
if (data == '.pdf')
return 'circle circle-pdf';
else
return 'circle circle-small';
};
в CSS
.circle-pdf {
width: 24px;
height: 24px;
font-size: 16px;
font-weight: 700;
padding-top: 3px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-image: url(images/pdf_icon32.png);
}
это решение сделало трюк для меня
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
другой вариант, когда вам нужен простой стиль css одного или двух свойств:
вид:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="{'background-color': getTrColor(element.myvar)}">
{{ element.myvar }}
</td>
[...more amazing code...]
</tr>
:
$scope.getTrColor = function (colorIndex) {
switch(colorIndex){
case 0: return 'red';
case 1: return 'green';
default: return 'yellow';
}
};
Вы можете использовать троичное выражение. Есть два способа сделать это:
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
или...
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
пример
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo Changing CSS Classes Conditionally with Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="res/js/controllers.js"></script>
<style>
.checkboxList {
border:1px solid #000;
background-color:#fff;
color:#000;
width:300px;
height: 100px;
overflow-y: scroll;
}
.uncheckedClass {
background-color:#eeeeee;
color:black;
}
.checkedClass {
background-color:#3ab44a;
color:white;
}
</style>
</head>
<body ng-controller="TeamListCtrl">
<b>Teams</b>
<div id="teamCheckboxList" class="checkboxList">
<div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">
<label>
<input type="checkbox" ng-model="team.isChecked" />
<span>{{team.name}}</span>
</label>
</div>
</div>
</body>
</html>
по состоянию на AngularJS v1.2.0 rc,ng-class
и даже ng-attr-class
сбой с элементами SVG (они работали раньше, даже с нормальной привязкой внутри атрибута class)
в частности, ни один из них не работает сейчас:
ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"
в качестве обходного пути я должен использовать
ng-attr-otherAttr="{{current==this_element?'active':''}}"
и затем с помощью
[otherAttr='active'] {
... styles ...
}
еще один (в будущем) способ условно применить стиль-условно создать стиль
<style scoped type="text/css" ng-if="...">
</style>
но в настоящее время только FireFox поддерживает стили с областью действия.
есть еще один вариант, который я недавно обнаружил, что некоторые люди могут найти полезным, потому что он позволяет изменить правило CSS в элементе стиля - таким образом, избегая необходимости повторного использования угловой директивы, такой как ng-style, ng-class, ng-show, ng-hide, ng-animate и другие.
этот параметр использует службу с переменными службы, которые задаются контроллером и наблюдаются директивой атрибута, которую я называю "пользовательский стиль". Эта стратегия может быть использована в много разных способов, и я попытался дать некоторые общие указания с этим скрипка.
var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
var vm = this;
});
app.controller('MainCtrl', function(MainService){
var vm = this;
vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
return {
restrict : 'A',
link : function(scope, element, attr){
var style = angular.element('<style></style>');
element.append(style);
scope.$watch(function(){ return MainService.theme; },
function(){
var css = '';
angular.forEach(MainService.theme, function(selector, key){
angular.forEach(MainService.theme[key], function(val, k){
css += key + ' { '+k+' : '+val+'} ';
});
});
style.html(css);
}, true);
}
};
});
ну, я бы предложил вам проверить состояние вашего контроллера с функцией возврата правда или false .
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
и в вашем контроллере проверяем условие
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
одна вещь, чтобы смотреть - если стиль CSS имеет тире - вы должны удалить их. Поэтому, если вы хотите установить background-color
правильный способ-это:
ng-style="{backgroundColor:myColor}"