Выражение if-else для AngularJS ng-класса

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
Что если мне нужно добавить два класса?
Миркобабини
2
Извините, я имею в виду «класс, если это, и другой класс, если это». Два класса, два разных условия.
Миркобабини
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/

Точка точка точка
источник
6
Это гораздо лучшее решение, чем вложенные троичные операторы,
говорит Дэвид Reinstate Monica
2
Любить это. Это сохраняет HTML даже чище, чем простой условный класс ng.
mrgnw
17
Проблема с этим подходом заключается в том, что теперь вы заставляете контроллер знать классы CSS. Не очень хороший подход. Лучше всего установить переменную в контроллере, а затем определить, какой класс использовать в HTML из переменной.
VtoCorleone
1
Это всего лишь подсказка о том, как вы можете это сделать, эта проблема была достаточно простой, чтобы иметь дело с троичным оператором, но когда вам нужно больше логики, вы не хотите делать это непосредственно в HTML, одним из самых быстрых решений является Как и я, использовать для этого функцию в вашем контроллере (если вы не хотите, чтобы контроллер знал о CSS, вы также можете наблюдать и устанавливать переменную области видимости и использовать условие в HTML на основе этого значения ). Но если у вас есть немного больше логики или много повторений, поместите это в директиву, это должно быть чище. Пример был в основном о НЕ помещая логику в HTML
DotDotDot
1
лучше, чем троичные операторы, если вам нужно добавить условие для более чем 2 или 3 различных классов, разделите HTML с помощью логики :)
Tho Vo
61

У меня была ситуация, когда мне нужно было два утверждения «если», которые могли бы и сбываться, и «другое» или значение по умолчанию, если ни одно из них не было правдой, не уверен, что это улучшение ответа Джосефа, но мне оно показалось чище: 

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

Если значения value.one и value.two имеют значение true, они имеют прецедент над классом .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-классе, если пример

Льюис Хай
источник
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>
BLACKRIGAN
источник
-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'}

Вы можете получить полную информацию от здесь .

Этешам Шами
источник