Adicionando várias classes usando a classe ng


542

Podemos ter várias expressões para adicionar várias classes ng?

por exemplo.

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

Se sim, alguém pode dar o exemplo para fazê-lo.

.


17
Seu exemplo funciona como está.
Steve Klösters

Sim, só precisava usar! Important no css para torná-lo visível. Eu encontrei por mim :) :)
Aditya Sethi

O que @stevuu disse .. é ri8 ... ur questão é a resposta
YaswanthJg

O valor expressionData1 geralmente assume true / false ou algum valor de string?
Martian2049

Respostas:


978

Para aplicar classes diferentes quando expressões diferentes são avaliadas para true:

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

Para aplicar várias classes quando uma expressão é verdadeira:

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

ou simplesmente:

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

Observe as aspas simples que cercam as classes css.


11
você não pode passar várias classes como ng-class = "{'class1 class2': expression1}" apenas teste isso e não funcionou, a solução como @CodeHater disse "Para aplicar várias classes quando uma expressão for verdadeira:" o truque
d1jhoni1b 14/07

9
Na versão 1.2.16, a opção de várias classes ( 'class1 class2': expression) parece funcionar bem, exceto que, se você reutilizar uma classe, ela é descartada quando a expressão alterna entre as opções. Por exemplo, com 'commonClass class1': expression == true, 'commonClass class2': expression == falsecommonClass é perdido, pois a expressão alterna entre verdadeiro e falso.
Brians

10
@BrianS eu faria algo assim:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner

@CodeHater thanks. É isso que estou planejando agora, só preciso de um momento para consertar o CSS.
Brians

É ng-class="{'class1' : expression1, 'class2':expression1 }"possível? Você se importaria de olhar para a minha pergunta: stackoverflow.com/questions/25391692/…
Danger14

48

Para a notação de operador ternário:

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

Este não funciona para mim. <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa-2x'"> </span>. O console lançará um erro.
precisa saber é o seguinte

usando esse método, posso adicionar outra expressão?
Hike Nalbandyan

6
@HikeNalbandyan sim, você pode adicionar outra expressão:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man

47

Sim, você pode ter várias expressões para adicionar várias classes na classe ng.

Por exemplo:

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

45

Uma alternativa incrivelmente poderosa para outras respostas aqui:

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

Alguns exemplos:

1. Simplesmente adiciona 'class1 class2 class3' à div:

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

2. Adiciona classes 'ímpar' ou 'par' a div, dependendo do índice $:

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

3. Cria dinamicamente uma classe para cada div com base no $ index

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

Se $index=5isso resultar em:

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

Aqui está um exemplo de código que você pode executar:

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>


2
Resposta brilhante! Eu sempre usei funções para ng-classdiretivas mais complexas , como quando eu precisava aplicar uma expressão ternária e padrão no mesmo elemento. Enviei uma edição à resposta aceita para incluir o uso de matrizes de expressões.
Daniel Bonnell

Eu não sou um especialista em Angular, mas parece que esse construto: [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]pode ser simplificado assim ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]. Eu apenas tentei no Angular 1.5.9 e funciona :) Obrigado por uma ótima resposta!
vadipp

30

Usando um $scopemétodo no controlador, você pode calcular quais classes serão exibidas na exibição. Isso é especialmente útil se você tiver uma lógica complexa para calcular nomes de classes e reduzirá a quantidade de lógica em sua exibição, movendo-a para o controlador:

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

    $scope.className = function() {

        var className = 'initClass';

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

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

        return className;
    };
});

e na visão, simplesmente:

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

1
Se a classe mudar após a renderização, a classe ng ainda está ouvindo alterações className?
Remarsh 30/09/15

3
IMHO, o escopo deve apenas expor a condição . Deverá depender das ng-ligações HTML para determinar qual classe usar quando essa condição for atendida.
Alnitak

1
Isso substitui o atributo de classe nos elementos dom. Se alguém usa isso, eles devem incluir as classes que não precisam de condições no retorno className.
Phuwin

21

Seu exemplo funciona para classes condicionadas (o nome da classe será exibido se expressionDataXfor verdadeiro):

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

Você também pode adicionar várias classes, fornecidas pelo usuário do elemento:

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

Uso:

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


3
Você sabe se é possível combinar os dois tipos de modelo, ou seja, ter uma classe condicional usando {}e uma classe ligada a dados usando []?
Jwg 27/10/2014

3
Tanto quanto sei, não é possível. Além disso, não é possível colocar duas ngClassdiretivas em um elemento.
seldary

Obrigado! Isso parece ser confirmado em outro lugar.
Jwg 27/10/2014

2
você ficará surpreso: <a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a> e mais: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
mayankcpdixit

1
@jwg: você pode combinar dois tipos de modelos e está aqui: stackoverflow.com/questions/29230732/...
Satish Kumar V

12

Aqui está um exemplo comparando vários estados de roteador-ui angular usando o OR || operador:

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

Ele dará ao li as classes de aviso e / ou ativo, dependendo se as condições são atendidas.


Eu realmente não consigo me lembrar. Não é lógico?
Nitech 13/09/16

Obrigado por esclarecer que várias classes podem ser aplicadas a partir do mesmo bloco de classe ng, desde que cada uma de suas condições seja satisfeita.
precisa saber é o seguinte

6

Abaixo de ativo e ativo, há classes e itemCount e ShowCart são valores de expressão / booleanos.

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

5

Com várias condições

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

4

Encontrei outro caminho graças ao Scotch.io

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

Esta foi a minha referência. CAMINHO


3

Outra maneira de criar uma função para controlar "usando várias classes"

CSS

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

Roteiro

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

Usando isso

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

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.