Jaki jest najlepszy sposób warunkowego zastosowania klasy?
Powiedzmy, że masz tablicę, która jest renderowana w {[0] } z li
dla każdego elementu i właściwością kontrolera o nazwie selectedIndex
. Jaki byłby najlepszy sposób na dodanie klasy do {[1] } z indeksem {[2] } w AngularJS?
Obecnie duplikuję (ręcznie) kod li
i dodaję klasę do jednego ze znaczników li
i używam ng-show
i ng-hide
, aby pokazać tylko jeden li
na indeks.
22 answers
Jeśli nie chcesz umieszczać nazw klas CSS w kontrolerze, tak jak ja, oto stara sztuczka, której używam od czasów przed v1. Możemy napisać wyrażenie, które ewaluuje bezpośrednio do nazwy klasy wybranej , nie są potrzebne żadne niestandardowe dyrektywy:
ng:class="{true:'selected', false:''}[$index==selectedIndex]"
zwróć uwagę na starą składnię z dwukropkiem.
Istnieje również nowy lepszy sposób warunkowego stosowania klas, jak:
ng-class="{selected: $index==selectedIndex}"
Angular obsługuje teraz wyrażenia zwracające obiekt. Każda nieruchomość (nazwa) obiekt ten jest teraz uważany za nazwę klasy i jest stosowany w zależności od jego wartości.
Jednak te sposoby nie są funkcjonalnie równe. Oto przykład:
ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
Moglibyśmy więc ponownie użyć istniejących klas CSS, zasadniczo mapując właściwość modelu do nazwy klasy i jednocześnie utrzymując klasy CSS z dala od kodu kontrolera.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-06 13:44:01
Ng-class obsługuje wyrażenie, które musi oceniać Do
- łańcuch nazw klas rozdzielonych spacjami lub
- tablica nazw klas, lub
- Mapa / obiekt nazw klas do wartości logicznych.
Więc, używając formularza 3) możemy po prostu napisać
ng-class="{'selected': $index==selectedIndex}"
Zobacz także Jak warunkowo zastosować style CSS w AngularJS? dla szerszej odpowiedzi.
Aktualizacja : Angular 1.1.5 dodał wsparcie dla ternary operator , więc jeśli ta konstrukcja jest Ci bardziej znana:
ng-class="($index==selectedIndex) ? 'selected' : ''"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:36
Moją ulubioną metodą jest użycie wyrażenia trójkowego.
ng-class="condition ? 'trueClass' : 'falseClass'"
Uwaga: Jeśli używasz starszej wersji Angular, powinieneś użyć tego zamiast tego,
ng-class="condition && 'trueClass' || 'falseClass'"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-27 13:39:22
Dodam do tego, bo niektóre z tych odpowiedzi wydają się nieaktualne. Oto jak to robię:
<class="ng-class:isSelected">
Gdzie' isSelected ' jest zmienną javascript zdefiniowaną w kontrolerze kątowym.
Aby dokładniej odpowiedzieć na twoje pytanie, oto jak możesz wygenerować listę z tym:
HTML
<div ng-controller="ListCtrl">
<li class="ng-class:item.isSelected" ng-repeat="item in list">
{{item.name}}
</li>
</div>
JS
function ListCtrl($scope) {
$scope.list = [
{"name": "Item 1", "isSelected": "active"},
{"name": "Item 2", "isSelected": ""}
]
}
Zobacz też: http://jsfiddle.net/tTfWM/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-27 02:01:38
Oto o wiele prostsze rozwiązanie:
function MyControl($scope){
$scope.values = ["a","b","c","d","e","f"];
$scope.selectedIndex = -1;
$scope.toggleSelect = function(ind){
if( ind === $scope.selectedIndex ){
$scope.selectedIndex = -1;
} else{
$scope.selectedIndex = ind;
}
}
$scope.getClass = function(ind){
if( ind === $scope.selectedIndex ){
return "selected";
} else{
return "";
}
}
$scope.getButtonLabel = function(ind){
if( ind === $scope.selectedIndex ){
return "Deselect";
} else{
return "Select";
}
}
}
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
<ul>
<li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
</ul>
<p>Selected: {{selectedIndex}}</p>
</div>
Spotkałem się ostatnio z podobnym problemem i postanowiłem po prostu utworzyć filtr warunkowy:
angular.module('myFilters', []).
/**
* "if" filter
* Simple filter useful for conditionally applying CSS classes and decouple
* view from controller
*/
filter('if', function() {
return function(input, value) {
if (typeof(input) === 'string') {
input = [input, ''];
}
return value? input[0] : input[1];
};
});
Pobiera pojedynczy argument, który jest dwuelementową tablicą lub łańcuchem znaków, który jest zamieniany w tablicę, do której dołączany jest pusty łańcuch jako drugi element:
<li ng-repeat="item in products | filter:search | orderBy:orderProp |
page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
...
</li>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-26 07:53:47
Jeśli chcesz wyjść poza ocenę binarną i trzymać swój CSS z dala od kontrolera, możesz zaimplementować prosty filtr, który ocenia dane wejściowe względem obiektu mapy:
angular.module('myApp.filters, [])
.filter('switch', function () {
return function (input, map) {
return map[input] || '';
};
});
To pozwala na zapisanie znaczników w następujący sposób:
<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
...
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-04 14:35:11
Operator trójkowy został dodany do parsera kątowego w 1.1.5.
Więc najprostszym sposobem jest teraz:
ng:class="($index==selectedIndex)? 'selected' : ''"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 08:32:50
Ostatnio robiłem tak:
<input type="password" placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">
Wartość isShowing
jest wartością, która znajduje się na moim kontrolerze, która jest przełączana za pomocą kliknięcia przycisku, a części między pojedynczym nawiasem to klasy, które utworzyłem w moim pliku css.
EDIT: chciałbym też dodać, że codeschool.com ma darmowy kurs sponsorowany przez google na AngularJS, który omawia wszystkie te rzeczy, a potem niektóre. Nie musisz za nic płacić, wystarczy zarejestrować się na konto i uzyskać idę! Wszystkiego najlepszego!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-05 20:27:14
Możemy utworzyć funkcję do zarządzania klasą zwracaną z warunkiem
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
$scope.getClass = function (strValue) {
switch(strValue) {
case "It is Red":return "Red";break;
case "It is Yellow":return "Yellow";break;
case "It is Blue":return "Blue";break;
case "It is Green":return "Green";break;
case "It is Gray":return "Gray";break;
}
}
}]);
</script>
A następnie
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
</li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
<li ng-repeat="icolor in MyColors">
<p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
</li>
</ul>
Możesz zapoznać się z pełną stroną kodową na ng-class if przykład
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-27 01:46:55
Jestem nowy w Angular, ale znalazłem to, aby rozwiązać mój problem:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
To warunkowo zastosuje klasę opartą na var.
Zaczyna się od icon-download domyślnie, używając ng-class, sprawdzam status showDetails
if true/false
i stosuję klasę icon-upload. Działa świetnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-24 14:57:33
To działa poprawnie;)
<ul class="nav nav-pills" ng-init="selectedType = 'return'">
<li role="presentation" ng-class="{'active':selectedType === 'return'}"
ng-click="selectedType = 'return'"><a href="#return">return
</a></li>
<li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
</a></li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-06 21:05:36
Prawdopodobnie zostanie to odrzucone do zapomnienia, ale oto jak użyłem operatorów trójkowych 1.1.5 do przełączania klas w zależności od tego, czy wiersz w tabeli jest pierwszy, środkowy czy ostatni -- z wyjątkiem sytuacji, gdy jest tylko jeden wiersz w tabeli:
<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-09 22:30:53
Oto kolejna opcja, która działa dobrze, gdy nie można użyć ng-class (na przykład podczas stylizacji SVG):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(myślę, że musisz być na najnowszym unstable Angular, aby użyć ng-attr -, obecnie jestem na 1.1.4)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-21 12:11:04
Sugerowałbym sprawdzenie warunku w kontrolerze za pomocą funkcji zwracającej true lub false .
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
I w kontrolerze sprawdź stan
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-06 11:11:57
Częściowy
<div class="col-md-4 text-right">
<a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
<a ng-class="campaign_range === 'all' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
</div>
Controller
$scope.campaign_range = "all";
$scope.change_range = function(range) {
if (range === "all")
{
$scope.campaign_range = "all"
}
else
{
$scope.campaign_range = "thismonth"
}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-21 13:37:37
To jest w mojej pracy wiele warunkowo Oceniać:
<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
<strong>{{eOption.eoSequence}}</strong> |
<span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-15 19:21:52
Jeśli używasz angular pre v1.1.5 (NO ternary operator) i nadal chcesz równoważny sposób ustawić wartość woba Warunki możesz zrobić coś takiego:
ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-22 14:25:57
Jeśli masz wspólną klasę, która jest zastosowana do wielu elementów, możesz utworzyć własną dyrektywę, która doda tę klasę jak ng-show/ng-hide.
Ta dyrektywa doda klasę "active" do przycisku, jeśli zostanie on kliknięty
module.directive('ngActive', ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
$animate[value ? 'addClass' : 'removeClass'](element, 'active');
});
};
}]);
Więcej informacji
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-03 09:13:06
Tylko dodałem coś, co mi dzisiaj zadziałało, po długich poszukiwaniach...
<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">
Mam nadzieję, że pomoże to w pomyślnym rozwoju.
=)
Składnia Wyrażenia Nieudokumentowanego: Great Website Link... =)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-24 20:55:15
Sprawdź http://www.codinginsight.com/angularjs-if-else-statement/
Niesławna wypowiedź angularjs if else!!! Kiedy zacząłem używać Angularjs, byłem trochę zaskoczony, że nie mogłem znaleźć instrukcji if / else.
Więc pracowałem nad projektem i zauważyłem, że podczas używania instrukcji if / else, warunek jest wyświetlany podczas ładowania. Możesz użyć ng-cloak, aby to naprawić.
<div class="ng-cloak">
<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>
</div>
.ng-cloak { display: none }
Thanks amadou
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-21 13:37:13
Możesz użyć tego pakietu npm. Obsługuje wszystko i ma opcje dla klas statycznych i warunkowych opartych na zmiennej lub funkcji.
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-05 05:47:45