Wyrażenie angularJS ng-class if-else

257

Z AngularJSUżywam ng-classnastępujący sposób:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

Zastanawiam się, czy mogę użyć tego if-elsewyrażenia, aby zrobić coś podobnego do tego:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

Więc ilekroć się call.Stateróżni firstlub secondużywa classCi unikacie podawania każdej wartości?

angularjs ng-class

— Dor Cohen
źródło

523

Użyj zagnieżdżonych wbudowanych instrukcji if-then ( operatory trójskładnikowe )

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

na przykład :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

I upewnij się, że jest czytelny dla twoich kolegów :)

— Jossef Harush
źródło

2

Co jeśli muszę dodać dwie klasy?

— mircobabini,

2

Przepraszam, mam na myśli „klasę, jeśli to ORAZ inną klasę, jeśli to”. Dwie klasy, dwa różne warunki.

— mircobabini

17

@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"jak widać w powyższym pytaniu

— Jossef Harush

2

To nie jest coś, co chcę zobaczyć w widoku. Zbyt dużo logiki dla widoku.

— AturSams,

19

@Zehelvion musiałbym się nie zgodzić. To jest logika widoku. Nie chciałbyś dyktować, która klasa kolumny ma być używana w kontrolerze lub usłudze ... właśnie tam powinna być.

— Nick

108

możesz spróbować użyć takiej funkcji:

<div ng-class='whatClassIsIt(call.State)'>

Następnie umieść swoją logikę w samej funkcji:

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

Zrobiłem skrzypce na przykład: http://jsfiddle.net/DotDotDot/nMk6M/

— Kropka kropka kropka
źródło

6

Jest to znacznie lepsze rozwiązanie niż zagnieżdżone operatory trójskładnikowe

— David mówi Reinstate Monica

2

Kocham to. Dzięki temu HTML jest jeszcze czystszy niż zwykły warunek klasy ng.

— mrgnw

17

Problem z tym podejściem polega teraz na uświadomieniu kontrolerowi klas CSS. Nie jest to dobre podejście. Lepszym rozwiązaniem jest ustawienie zmiennej w kontrolerze, a następnie określenie, która klasa ma zostać użyta w kodzie HTML ze zmiennej.

— VtoCorleone,

1

To tylko wskazówka, jak to zrobić, ten problem był wystarczająco prosty, aby poradzić sobie z operatorem trójskładnikowym, ale gdy potrzebujesz więcej logiki, nie chcesz tego robić bezpośrednio w HTML, jednym z najszybszych rozwiązań jest , podobnie jak ja, aby użyć do tego celu funkcji w kontrolerze (jeśli nie chcesz, aby kontroler wiedział o CSS, możesz także oglądać i ustawiać zmienną zakresu i używać warunku w HTML na podstawie tej wartości ). Ale jeśli masz trochę więcej logiki lub wiele powtórzeń, umieść to w dyrektywie, powinno być czystsze. Przykład dotyczył głównie NIE umieszczania logiki w

— kodzie

1

lepsze niż operatory trójskładnikowe, jeśli chcesz dodać warunek dla więcej niż 2 lub 3 różnych klas, oddziel html logiką :)

— Tho Vo

61

Miałem sytuację, w której potrzebowałem dwóch stwierdzeń „jeśli”, które mogłyby się spełnić, i „innego” lub domyślnego, jeśli żadne z nich nie było prawdziwe, nie jestem pewien, czy to poprawa odpowiedzi Jossefa, ale wydawało mi się to czystsze:

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

Tam, gdzie wartość value.one i wartość.two są prawdziwe, mają one pierwszeństwo przed klasą .else

— joel.bowen
źródło

13

Wyraźnie ! Możemy wykonać funkcję zwracającą nazwę klasy CSS, podając pełny przykład.

CSS

<style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
     .b{
         font-weight: bold;
    }
</style>

JS

<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) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

I wtedy

<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 odwołać się do pełnej strony kodowej na ng-class, jeśli przykład

— Lewis Hai
źródło

3

Powyższe rozwiązania nie działały dla mnie w przypadku klas z obrazami w tle. Stworzyłem domyślną klasę (potrzebną w innym) i ustawiłem class = 'defaultClass', a następnie ng-class = "{class1: abc, class2: xyz}"

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

PS: Klasy, które są w stanie, powinny zastąpić klasę domyślną, tj. Oznaczone jako! Ważne

— Kazim Homayee
źródło

1

To najlepszy i niezawodny sposób na zrobienie tego. Oto prosty przykład, po którym możesz opracować własną logikę:

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>

— Avtandil Kavrelishvili
źródło

0

Moim obejściem jest manipulowanie zmienną modelu tylko w celu przełączania klasy ng:

Na przykład chcę przełączać klasę zgodnie ze stanem mojej listy:

1) Ilekroć moja lista jest pusta, aktualizuję mój model:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2) Ilekroć moja lista nie jest pusta, ustawiam inny stan

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) Gdy moja lista nigdy nie zostanie zmieniona, chcę dać kolejną klasę (tutaj inicjowana jest strona):

$scope.liststate = "init";

3) Używam tego dodatkowego modelu w mojej klasie ng:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"

— Bahadir Tasdemir
źródło

0

Użyj tego w ten sposób:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>

— BLACKRIGAN
źródło

-3

Możesz wypróbować tę metodę:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}

Można uzyskać pełne dane z tutaj .

— Ehtesham Shami
źródło