AngularJS ng-class ekspresi if-else

257

Dengan AngularJSsaya menggunakan ng-classcara berikut:

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

Saya ingin tahu apakah saya dapat menggunakan if-elseekspresi untuk melakukan sesuatu yang mirip dengan ini:

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

Jadi, setiap kali call.Stateberbeda dari firstatau secondmenggunakan classCdan menghindari menentukan setiap nilai?

angularjs ng-class Dor Cohen
sumber

Jawaban:

523

Gunakan pernyataan inline bersarang jika-maka ( Operator Ternary )

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

sebagai contoh :

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

Dan pastikan itu bisa dibaca oleh kolega Anda :)

Jossef Harush
sumber
2
Bagaimana jika saya perlu menambahkan dua kelas?
mircobabini
2
Maaf, maksud saya "kelas jika ini DAN kelas lain jika itu". Dua kelas, dua kondisi berbeda.
mircobabini
17
@ mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"seperti yang Anda lihat dalam pertanyaan di atas
Jossef Harush
2
Ini bukan sesuatu yang ingin saya lihat dalam tampilan. Logika terlalu banyak untuk tampilan.
AturSams
19
@Zehelvion saya harus tidak setuju. Ini adalah logika tampilan. Anda tidak ingin mendikte kelas kolom mana yang akan digunakan dalam controller atau layanan Anda .. ini adalah tempatnya.
Nick
108

Anda dapat mencoba dengan menggunakan fungsi seperti itu:

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

Kemudian masukkan logika Anda ke dalam fungsi itu sendiri:

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

Saya membuat biola dengan contoh: http://jsfiddle.net/DotDotDot/nMk6M/

Titik titik titik
sumber
6
Ini adalah solusi yang jauh lebih baik daripada operator ternary yang bersarang
David mengatakan Reinstate Monica
2
Suka. Ini membuat html lebih bersih daripada persyaratan ng-class sederhana.
mrgnw
17
Masalah dengan pendekatan ini adalah sekarang Anda membuat controller sadar akan kelas CSS. Bukan pendekatan yang bagus. Memiliki set variabel di controller dan kemudian menentukan kelas mana yang akan digunakan dalam HTML dari variabel adalah solusi yang lebih baik.
VtoCorleone
1
Ini hanya petunjuk tentang bagaimana Anda dapat melakukannya, masalah ini cukup sederhana untuk ditangani oleh operator ternary, tetapi ketika Anda membutuhkan lebih banyak logika Anda tidak ingin melakukannya dalam HTML secara langsung, salah satu solusi tercepat adalah , seperti yang saya lakukan, untuk menggunakan fungsi di controller Anda untuk itu (jika Anda tidak ingin controller menyadari CSS, Anda juga dapat menonton dan mengatur variabel lingkup dan menggunakan kondisi dalam HTML berdasarkan nilai itu ). Tetapi, jika Anda memiliki sedikit lebih banyak logika, atau banyak pengulangan, letakkan ini dalam arahan, itu harus lebih bersih. Contohnya kebanyakan tentang TIDAK menempatkan logika dalam HTML
DotDotDot
1
lebih baik daripada operator ternary jika Anda perlu menambahkan kondisi untuk lebih dari 2 atau 3 kelas yang berbeda, pisahkan html dengan logika :)
Tho Vo
61

Saya memiliki situasi di mana saya membutuhkan dua pernyataan 'jika' yang bisa menjadi kenyataan dan 'yang lain' atau default jika tidak ada yang benar, tidak yakin apakah ini merupakan perbaikan pada jawaban Jossef tetapi tampaknya lebih bersih bagi saya: 

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

Di mana value.one dan value.two benar, mereka mengambil preseden atas kelas .else

joel.bowen
sumber
13

Jelas ! Kita dapat membuat fungsi untuk mengembalikan nama kelas CSS dengan contoh lengkap berikut. masukkan deskripsi gambar di sini

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>

Lalu 

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

Anda dapat merujuk ke halaman kode lengkap di kelas ng misalnya

Lewis Hai
sumber
3

Solusi di atas tidak berhasil bagi saya untuk kelas dengan gambar latar belakang entah bagaimana. Apa yang saya lakukan adalah saya membuat kelas default (yang Anda butuhkan di tempat lain) dan mengatur class = 'defaultClass' dan kemudian 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: Kelas-kelas yang berada dalam kondisi harus menimpa kelas default yaitu ditandai sebagai! Penting

Kazim Homayee
sumber
1

Ini adalah cara terbaik dan dapat diandalkan untuk melakukan ini. Berikut adalah contoh sederhana dan setelah itu Anda dapat mengembangkan logika khusus Anda:

//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
sumber
0

Solusi saya adalah memanipulasi variabel model hanya untuk toggling ng-class:

Sebagai contoh, saya ingin beralih kelas sesuai dengan keadaan daftar saya:

1) Setiap kali daftar saya kosong, saya memperbarui model saya:

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

2) Setiap kali daftar saya tidak kosong, saya menetapkan negara lain

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

3) Ketika daftar saya tidak pernah disentuh, saya ingin memberikan kelas lain (di sinilah halaman dimulai):

$scope.liststate = "init";

3) Saya menggunakan model tambahan ini di kelas ng:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
Bahadir Tasdemir
sumber
0

Gunakan seperti ini:

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

Anda dapat mencoba metode ini:

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

Anda bisa mendapatkan detail lengkap dari sini .

Ehtesham Shami
sumber