AngularJS ng sınıfı if-else ifadesi

257

İle AngularJSkullanıyorum ng-classşu şekilde:

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

Buna if-elsebenzer bir şey yapmak için ifadeyi kullanabilir miyim merak ediyorum :

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

Öyleyse her bir değerden call.Statefarklı olduğunda firstveya her bir değeri belirtmekten ve secondkullanmaktan classCkaçınmak?

angularjs ng-class

— Dor Cohen
kaynak

523

İç içe satır içi if-then deyimlerini kullanma ( Üçlü İşleçler )

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

Örneğin :

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

Ve meslektaşlarınız tarafından okunabilir olduğundan emin olun :)

— Jossef Harush
kaynak

2

İki ders eklemem gerekirse ne olur?

— mircobabini

2

Üzgünüm, demek istediğim "eğer bu bir classe VE eğer bu başka bir sınıf". İki sınıf, iki farklı koşul.

— mircobabini

18

@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"yukarıdaki

— soruda da görebileceğiniz

2

Bu görünümde görmek istediğim bir şey değil. Görünüm için çok fazla mantık.

— AturSams

19

@ Zehelvion Katılmam gerekecekti. Bu görünüm mantığı. Denetleyicinizde veya bir hizmette hangi sütun sınıfının kullanılacağını dikte etmek istemezsiniz.

— Nick

109

böyle bir işlevi kullanarak deneyebilirsiniz:

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

Ardından mantığınızı işlevin kendisine koyun:

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

Bir örnekle bir keman yaptım: http://jsfiddle.net/DotDotDot/nMk6M/

— Nokta nokta nokta
kaynak

6

Bu iç içe üçlü operatörlerden çok daha iyi bir çözüm

— David diyor Reinstate Monica

2

Sevdim. Bu, html'yi basit bir ng sınıfı koşulludan daha temiz tutar.

— mrgnw

17

Bu yaklaşımla ilgili sorun, şimdi denetleyiciyi CSS sınıflarından haberdar etmektir. İyi bir yaklaşım değil. Denetleyicide bir değişken kümesine sahip olmak ve daha sonra değişkenin HTML'sinde hangi sınıfın kullanılacağını belirlemek daha iyi bir çözümdür.

— VtoCorleone

1

Bu sadece bunu nasıl yapabileceğinize dair bir ipucu, bu sorun üçlü bir operatörle ele alınacak kadar basitti, ancak daha fazla mantığa ihtiyacınız olduğunda bunu doğrudan HTML'de yapmak istemezsiniz, en hızlı çözümlerden biri benim yaptığım gibi, bunun için denetleyicinizde bir işlev kullanmak için (denetleyicinin CSS'den haberdar olmasını istemiyorsanız, bir kapsam değişkeni izleyebilir ve ayarlayabilir ve bu değere dayalı olarak HTML'de bir koşul kullanabilirsiniz ). Ancak, biraz daha fazla mantığınız veya birçok tekrarınız varsa, bunu bir direktife koyun, daha temiz olmalıdır. Örnek çoğunlukla HTML'ye mantık

— koymamakla ilgilidir

1

2 veya 3'ten fazla farklı sınıf için koşul eklemeniz gerekiyorsa, üçlü operatörlerden daha iyi, html'yi mantıkla ayırın :)

— Tho Vo

61

Ben her ikisi de doğru gidebilir iki 'if' ifadeleri ve ne doğruysa 'varsayılan' ya da varsayılan gereken bir durum vardı, bu Jossef cevabı bir gelişme olup olmadığından emin değilim ama bana daha temiz görünüyordu:

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

Value.one ve value.two doğru olduğunda, .else sınıfı üzerinde emsal alırlar

— joel.bowen
kaynak

13

Açıkça ! Aşağıdaki tam örnekle bir CSS sınıf adı döndürmek için bir işlev yapabiliriz.

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>

Ve sonra

<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>

Örneğin , ng-class'taki tam kod sayfasına başvurabilirsiniz

— Lewis Hai
kaynak

3

Yukarıdaki çözümler bir şekilde arka plan resimleri olan sınıflar için benim için işe yaramadı. Ne yaptığım bir varsayılan sınıf (başka ihtiyacınız olanı) oluşturmak ve class = 'defaultClass' ve sonra 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>

Not: Koşullu sınıflar varsayılan olarak geçersiz kılınmalıdır, yani!

— Kazim Homayee
kaynak

1

Bunu yapmanın en iyi ve güvenilir yolu budur. İşte basit bir örnek ve bundan sonra özel mantığınızı geliştirebilirsiniz:

//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
kaynak

0

Geçici çözümüm, sadece ng sınıfı geçiş için bir model değişkenini manipüle etmektir:

Örneğin, listemin durumuna göre sınıfı değiştirmek istiyorum:

1) Listem boş olduğunda modelimi güncellerim:

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

2) Listem boş olmadığında başka bir durum ayarladım

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

3) Listeme hiç dokunulmadığında, başka bir sınıf vermek istiyorum (bu, sayfanın başlatıldığı yerdir):

$scope.liststate = "init";

3) Bu ek modeli ng sınıfımda kullanıyorum:

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

— Bahadir Tasdemir
kaynak

0

Bu şekilde kullanın:

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

— BLACKRIGAN
kaynak

-3

Bu yöntemi deneyebilirsiniz:

</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'}

Tüm detayları buradan edinebilirsiniz .

— Ehtesham Shami
kaynak