AngularJS ng-class if-other biểu thức

257

Với AngularJStôi đang sử dụng cách ng-classsau:

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

Tôi tự hỏi nếu tôi có thể sử dụng if-elsebiểu thức để làm một cái gì đó tương tự như thế này:

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

Vì vậy, bất cứ khi nào call.Statekhác firsthoặc secondsử dụng classCvà tránh chỉ định từng giá trị?

angularjs ng-class

— Dor Cohen
nguồn

523

Sử dụng các câu lệnh if-then lồng nhau ( Toán tử Ternary )

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

ví dụ :

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

Và chắc chắn rằng đồng nghiệp của bạn có thể đọc được :)

— Jossef Harush
nguồn

2

Nếu tôi cần thêm hai lớp thì sao?

— mircobabini

2

Xin lỗi, tôi có nghĩa là "một classe nếu điều này VÀ một lớp khác nếu điều đó". Hai lớp, hai điều kiện khác nhau.

— mircobabini

17

@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"như bạn có thể thấy trong câu hỏi trên

— Jossef Harush

2

Đây không phải là một cái gì đó tôi muốn nhìn thấy trong chế độ xem. Cách quá nhiều logic cho quan điểm.

— AturSams

19

@Zehelvion Tôi phải không đồng ý. Đây là quan điểm logic. Bạn sẽ không muốn ra lệnh cho lớp cột nào sẽ được sử dụng trong bộ điều khiển hoặc dịch vụ của bạn .. đây là nơi cần có.

— Nick

108

bạn có thể thử bằng cách sử dụng một chức năng như thế:

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

Sau đó đặt logic của bạn vào chính hàm:

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

Tôi đã thực hiện một câu đố với một ví dụ: http://jsfiddle.net/DotDotDot/nMk6M/

— Chấm chấm chấm
nguồn

6

Đây là một giải pháp tốt hơn nhiều so với các nhà khai thác chim nhạn lồng nhau

— David nói rằng Rebstate Monica

2

Yêu nó. Điều này giữ cho html thậm chí còn sạch hơn một điều kiện ng-class đơn giản.

— mrgnw

17

Vấn đề với cách tiếp cận này hiện là bạn đang làm cho trình điều khiển nhận biết các lớp CSS. Không phải là một cách tiếp cận tốt. Có một biến được đặt trong bộ điều khiển và sau đó xác định lớp nào sẽ sử dụng trong HTML từ biến là giải pháp tốt hơn.

— VtoCorleone

1

Đây chỉ là một gợi ý về cách bạn có thể làm điều đó, vấn đề này đủ đơn giản để xử lý một toán tử tạm thời, nhưng khi bạn cần logic hơn, bạn không muốn làm điều đó trực tiếp trong HTML, một trong những giải pháp nhanh nhất là , giống như tôi đã làm, để sử dụng một hàm trong bộ điều khiển của bạn cho điều đó (nếu bạn không muốn bộ điều khiển biết về CSS, bạn cũng có thể xem và đặt biến phạm vi và sử dụng một điều kiện trong HTML dựa trên giá trị đó ). Nhưng, nếu bạn có logic hơn một chút, hoặc nhiều lần lặp lại, hãy đặt điều này trong một chỉ thị, nó sẽ sạch hơn. Ví dụ chủ yếu là về việc KHÔNG đưa logic vào HTML

— DotDotDot

1

tốt hơn các toán tử ternary nếu bạn cần thêm điều kiện cho hơn 2 hoặc 3 lớp khác nhau, tách html bằng logic :)

— Tho Vo

61

Tôi đã có một tình huống mà tôi cần hai câu 'nếu' có thể thành sự thật và 'khác' hoặc mặc định nếu không đúng, không chắc đây có phải là một cải tiến đối với câu trả lời của Jossef nhưng nó có vẻ rõ ràng hơn đối với tôi:

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

Trong đó value.one và value.two là true, chúng có tiền lệ trên lớp .else

— joel.bowen
nguồn

13

Rõ ràng ! Chúng ta có thể tạo một hàm để trả về một tên lớp CSS với ví dụ đầy đủ sau đây.

CSS

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

Mã não

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

Và sau đó

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

Bạn có thể tham khảo trang mã đầy đủ tại ng-class nếu ví dụ

— Lewis Hai
nguồn

3

Các giải pháp trên không phù hợp với tôi đối với các lớp có hình nền. Những gì tôi đã làm là tôi tạo một lớp mặc định (lớp bạn cần) và đặt class = 'defaultClass' và sau đó là 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: Các lớp đang trong tình trạng nên ghi đè lớp mặc định tức là được đánh dấu là! Quan trọng

— Homayee Kazim
nguồn

1

Đây là cách tốt nhất và đáng tin cậy để làm điều này. Đây là một ví dụ đơn giản và sau đó bạn có thể phát triển logic tùy chỉnh của mình:

//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
nguồn

0

Một cách giải quyết của tôi là thao tác một biến mô hình chỉ để bật lớp ng:

Ví dụ: tôi muốn chuyển đổi lớp theo trạng thái của danh sách của mình:

1) Bất cứ khi nào danh sách của tôi trống, tôi cập nhật mô hình của mình:

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

2) Bất cứ khi nào danh sách của tôi không trống, tôi đặt trạng thái khác

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

3) Khi danh sách của tôi chưa từng được chạm vào, tôi muốn đưa ra một lớp khác (đây là nơi trang được bắt đầu):

$scope.liststate = "init";

3) Tôi sử dụng mô hình bổ sung này trên lớp ng:

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

— Bahadir TASdemir
nguồn

0

Sử dụng theo cách này:

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

— BLACKRIGAN
nguồn

-3

Bạn có thể thử phương pháp này:

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

Bạn có thể nhận được chi tiết đầy đủ từ đây .

— Ehtesham Shami
nguồn