AngularJS ng-class if-else вираз

257

З AngularJSЯ використовую ng-classтакий спосіб:

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

Мені цікаво, чи можу я використовувати if-elseвираз, щоб зробити щось подібне до цього:

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

Отже, коли це call.Stateвідрізняється від firstабо не secondвикористовується, classCі уникати вказівки кожного значення?

angularjs ng-class

— Дор Коен
джерело

523

Використовуйте вкладені вбудовані заяви if-then ( термінальні оператори )

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

наприклад :

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

І переконайтесь, що ваші колеги читаються :)

— Йосеф Харуш
джерело

2

Що робити, якщо мені потрібно додати два класи?

— mircobabini

2

Вибачте, я маю на увазі "клас, якщо це І інший клас, якщо це". Два класу, дві різні умови.

— mircobabini

17

@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"як ви можете бачити в запитанні вище

— Йосеф Харуш

2

Це не те, що я хочу бачити в погляді. Занадто багато логіки для перегляду.

— AturSams

19

@Zehelvion Я б не погодився. Це логіка перегляду. Ви не хочете диктувати, який клас стовпців використовувати в контролері чи службі. Це саме там має бути.

— Нік

108

ви можете спробувати скористатися такою функцією:

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

Потім введіть свою логіку в саму функцію:

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

Я склав загадку з прикладом: http://jsfiddle.net/DotDotDot/nMk6M/

— DotDotDot
джерело

6

Це набагато краще рішення, ніж вкладені потрійні оператори,

— каже Девід. Відновіть Моніку

2

Любіть це. Це робить html ще чистішим, ніж простий клас ng.

— mrgnw

17

Проблема з таким підходом полягає в тому, що ви повідомляєте контролер про CSS-класи. Не гарний підхід. Встановити набір змінної в контролері, а потім визначити, який клас використовувати в HTML із змінної, є кращим рішенням.

— VtoCorleone

1

Це лише натяк на те, як ви можете це зробити, ця проблема була досить простою, щоб вирішуватись із потрійним оператором, але коли вам потрібна більше логіки, ви не хочете робити це безпосередньо в HTML, одним із найшвидших рішень є як і я, використовувати для цього функцію у вашому контролері (якщо ви не хочете, щоб контролер знав про CSS, ви також можете переглядати та встановлювати змінну області застосування та використовувати умову в HTML на основі цього значення ). Але якщо у вас є трохи більше логіки або багато повторень, покладіть це на директиву, вона повинна бути чистішою. Приклад здебільшого

— стосувався

1

краще, ніж тернарні оператори, якщо вам потрібно додати умову для більш ніж 2 або 3 різних класів, розділіть html з логікою :)

— Tho Vo

61

У мене була ситуація, коли мені були потрібні два твердження "якщо", які можуть бути істинними, і "інше" або за замовчуванням, якщо жодне не було істинним, не впевнений, чи є це поліпшенням відповіді Йозефа, але мені здалося більш зрозумілим:

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

Там, де value.one та value.two вірні, вони мають перевагу над .else-класом

— joel.bowen
джерело

13

Ясно ! Ми можемо створити функцію повернення імені класу CSS з наступним повністю прикладом.

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>

І потім

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

Ви можете, наприклад, звернутися до повної кодової сторінки в ng-class

— Льюїс Хай
джерело

3

Вищезазначені рішення мені не спрацювали для занять із фоновими зображеннями. Що я зробив, це створити клас за замовчуванням (той, який вам потрібен в іншому) і встановити class = 'defaultClass', а потім 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: Класи, які знаходяться в стані, повинні перевищувати клас за замовчуванням, тобто позначені як!

— Казим Хомайе
джерело

1

Це найкращий і надійний спосіб зробити це. Ось простий приклад, і після цього ви можете розробити власну логіку:

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

— Автанділ Каврелішвілі
джерело

0

Моє вирішення полягає в тому, щоб маніпулювати змінною моделі просто для зміни ng-класу:

Наприклад, я хочу переключити клас відповідно до стану мого списку:

1) Щоразу, коли мій список порожній, я оновлюю свою модель:

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

2) Щоразу, коли мій список не порожній, я встановлюю інший стан

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

3) Коли мій список ніколи не торкається, я хочу дати ще один клас (саме тут ініціюється сторінка):

$scope.liststate = "init";

3) Я використовую цю додаткову модель у своєму ng-класі:

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

— Бахадір Тасдемір
джерело

0

Використовуйте його таким чином:

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

— БЛЕКРИГАН
джерело

-3

Ви можете спробувати цей метод:

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

Ви можете отримати повну інформацію тут .

— Ехтешам Шамі
джерело