Thêm nhiều lớp bằng ng-class

Chúng ta có thể có nhiều biểu thức để thêm nhiều ng-class không?

ví dụ

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Nếu có ai có thể đưa ra ví dụ để làm như vậy.

.

Để áp dụng các lớp khác nhau khi các biểu thức khác nhau đánh giá true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

Để áp dụng nhiều lớp khi một biểu thức giữ đúng:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

hoặc khá đơn giản:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Lưu ý các trích dẫn duy nhất xung quanh các lớp css.

Đối với ký hiệu toán tử ternary:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

Có, bạn có thể có nhiều biểu thức để thêm nhiều lớp trong ng-class.

Ví dụ:

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

Một thay thế vô cùng mạnh mẽ cho các câu trả lời khác ở đây:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

Vài ví dụ:

1. Chỉ cần thêm 'class1 class2 class3' vào div:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

2. Thêm các lớp 'lẻ' hoặc 'chẵn' vào div, tùy thuộc vào chỉ mục $:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

3. Tự động tạo một lớp cho mỗi div dựa trên chỉ mục $

<div ng-class="[{true:'index'+$index}[true]]"></div>

Nếu $index=5điều này sẽ dẫn đến:

<div class="index5"></div>

Đây là một mẫu mã bạn có thể chạy:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 

.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>

Sử dụng một $scopephương thức trên bộ điều khiển, bạn có thể tính toán các lớp sẽ xuất ra trong khung nhìn. Điều này đặc biệt hữu ích nếu bạn có một logic phức tạp để tính toán tên lớp và nó sẽ giảm lượng logic trong chế độ xem của bạn bằng cách di chuyển nó đến bộ điều khiển:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

và theo quan điểm, chỉ cần:

<div ng-class="className()"></div>

Ví dụ của bạn hoạt động cho các lớp có điều kiện (tên lớp sẽ hiển thị nếu expressionDataXđúng):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Bạn cũng có thể thêm nhiều lớp, được cung cấp bởi người dùng của phần tử:

<div ng-class="[class1, class2]"></div>

Sử dụng:

<div class="foo bar" class1="foo" class2="bar"></div>

Dưới đây là một ví dụ so sánh nhiều trạng thái bộ định tuyến góc bằng OR | | nhà điều hành:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

Nó sẽ cung cấp cho li các cảnh báo các lớp và / hoặc hoạt động, tùy thuộc vào việc các điều kiện có được đáp ứng hay không.

Bên dưới active và activemenu là các lớp và itemCount và ShowCart là các giá trị biểu thức / boolean.

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

Với nhiều điều kiện

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>

Tìm thấy một cách khác nhờ Scotch.io

<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">

Đây là tài liệu tham khảo của tôi. CON ĐƯỜNG

Theo cách khác, chúng ta có thể tạo một hàm để điều khiển "sử dụng nhiều lớp"

CSS

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

Kịch bản

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

Sử dụng nó

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

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