Expressão if-else da classe ng AngularJS

257

Com AngularJSestou usando ng-classda seguinte maneira:

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

Gostaria de saber se posso usar a if-elseexpressão para fazer algo semelhante a este:

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

Então, sempre que call.Statedifere firstou seconduse classCe evite especificar cada valor?

angularjs ng-class Dor Cohen
fonte

Respostas:

523

Use instruções if-then embutidas aninhadas ( operadores ternários )

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

por exemplo :

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

E verifique se é legível por seus colegas :)

Jossef Harush
fonte
2
E se eu precisar adicionar duas classes?
mircobabini
2
Desculpe, quero dizer "uma classe se esta e outra classe se isso". Duas classes, duas condições diferentes.
mircobabini
17
@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"como você pode ver na pergunta acima
Jossef Harush
2
Isso não é algo que eu quero ver na exibição. Lógica demais para a vista.
AturSams
19
@ Zeeelvion, eu teria que discordar. Essa é a lógica da visualização. Você não gostaria de ditar qual classe de coluna usar em seu controlador ou serviço. É aqui que deve estar.
22414 Nick
108

você pode tentar usar uma função como essa:

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

Em seguida, coloque sua lógica na própria função:

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

Eu fiz um violino com um exemplo: http://jsfiddle.net/DotDotDot/nMk6M/

Ponto ponto Ponto
fonte
6
Esta é uma solução muito melhor do que os operadores ternários aninhados
David diz Reinstate Monica
2
Adoro. Isso mantém o html ainda mais limpo do que uma simples condicional da classe ng.
mrgnw
17
O problema dessa abordagem é agora que você está tornando o controlador ciente das classes CSS. Não é uma boa abordagem. Ter uma variável definida no controlador e depois determinar qual classe usar no HTML a partir da variável é a melhor solução.
VtoCorleone
1
Esta é apenas uma dica de como você pode fazê-lo, esse problema era simples o suficiente para ser tratado com um operador ternário, mas quando você precisa de mais lógica, não deseja fazer isso diretamente no HTML, uma das soluções mais rápidas é , como eu fiz, para usar uma função em seu controlador para isso (se você não quiser que o controlador esteja ciente do CSS, também poderá assistir e definir uma variável de escopo e usar uma condição no HTML com base nesse valor ) Mas, se você tiver um pouco mais de lógica ou muitas repetições, coloque isso em uma diretiva, deve ser mais limpo. O exemplo foi principalmente sobre não colocar lógica no HTML
DotDotDot
1
melhor do que operadores ternários se você precisa adicionar condição por mais de 2 ou 3 classe diferente, separar o html com a lógica :)
Tho Vo
61

Eu tive uma situação em que eu precisava de duas declarações 'if' que pudessem se tornar verdadeiras e uma 'else' ou padrão, se nenhuma delas fosse verdadeira, não tenho certeza se isso é uma melhoria na resposta de Jossef, mas me pareceu mais limpo: 

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

Onde value.one e value.two são verdadeiros, eles têm precedência sobre a classe .else

joel.bowen
fonte
13

Claramente ! Podemos criar uma função para retornar um nome de classe CSS com o seguinte exemplo completo. insira a descrição da imagem aqui

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>

E depois 

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

Você pode consultar a página de códigos completa na classe ng, por exemplo

Lewis Hai
fonte
3

As soluções acima não funcionaram para mim para aulas com imagens de fundo de alguma forma. O que fiz foi criar uma classe padrão (a que você precisa mais) e definir class = 'defaultClass' e, em seguida, a classe ng = "{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: As classes que estão em condições devem substituir a classe padrão, ou seja, marcadas como! Important

Kazim Homayee
fonte
1

Esta é a melhor e mais confiável maneira de fazer isso. Aqui está um exemplo simples e, depois disso, você pode desenvolver sua lógica personalizada:

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

Uma solução alternativa minha é manipular uma variável de modelo apenas para a alternância da classe ng:

Por exemplo, eu quero alternar a classe de acordo com o estado da minha lista:

1) Sempre que minha lista estiver vazia, atualizo meu modelo:

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

2) Sempre que minha lista não estiver vazia, defino outro estado

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

3) Quando minha lista nunca é tocada, desejo dar outra aula (é aqui que a página é iniciada):

$scope.liststate = "init";

3) Eu uso este modelo adicional na minha classe ng:

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

Use-o desta maneira:

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

Você pode tentar este método:

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

Você pode obter detalhes completos a partir daqui .

Ehtesham Shami
fonte