Qual é a melhor maneira de aplicar uma class condicionalmente?

Vamos dizer que você tem uma matriz que é renderizada em um ul com um li para cada elemento e uma propriedade no controlador chamada selectedIndex . Qual seria a melhor maneira de adicionar uma class ao li com o índice selectedIndex no AngularJS?

Atualmente, estou duplicando (manualmente) o código li e adicionando a class a uma das tags li e usando ng-show e ng-hide para mostrar apenas um li por índice.

Se você não quiser colocar nomes de classs CSS no Controller como eu, aqui está um truque antigo que eu uso desde os dias pré-v1. Podemos escrever uma expressão que avalie diretamente para um nome de class selecionado , sem diretivas personalizadas são necessárias:

 ng:class="{true:'selected', false:''}[$index==selectedIndex]" 

Por favor, observe a antiga syntax com dois pontos.

Há também uma nova maneira melhor de aplicar classs condicionalmente, como:

 ng-class="{selected: $index==selectedIndex}" 

Angular agora suporta expressões que retornam um object. Cada propriedade (nome) deste object é agora considerada como um nome de class e é aplicada dependendo de seu valor.

No entanto, essas formas não são funcionalmente iguais. Aqui está um exemplo:

 ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]" 

Poderíamos, portanto, reutilizar as classs CSS existentes, basicamente mapeando uma propriedade de modelo para um nome de class e, ao mesmo tempo, mantendo as classs CSS fora do código do Controlador.

ng-class suporta uma expressão que deve avaliar tanto

  1. Uma cadeia de nomes de classs delimitados por espaços ou
  2. Uma matriz de nomes de classs ou
  3. Um mapa / object de nomes de classs para valores booleanos.

Então, usando o formulário 3) podemos simplesmente escrever

 ng-class="{'selected': $index==selectedIndex}" 

Veja também Como aplico condicionalmente estilos CSS em AngularJS? para uma resposta mais ampla.


Atualização : O Angular 1.1.5 adicionou suporte para um operador ternário , portanto, se essa construção for mais familiar para você:

 ng-class="($index==selectedIndex) ? 'selected' : ''" 

Meu método favorito é usar a expressão ternária.

 ng-class="condition ? 'trueClass' : 'falseClass'" 

Observação: caso você use uma versão mais antiga do Angular, use isso,

 ng-class="condition && 'trueClass' || 'falseClass'" 

Eu adicionarei a isso, porque algumas dessas respostas parecem desatualizadas. Aqui está como eu faço:

  

Onde ‘isSelected’ é uma variável javascript definida no controlador angular com escopo definido.

Para abordar mais especificamente sua pergunta, veja como você pode gerar uma lista com isso:

HTML

 
  • {{item.name}}
  • JS

     function ListCtrl($scope) { $scope.list = [ {"name": "Item 1", "isSelected": "active"}, {"name": "Item 2", "isSelected": ""} ] } 

    Veja: http://jsfiddle.net/tTfWM/

    Veja: http://docs.angularjs.org/api/ng.directive:ngClass

    Aqui está uma solução muito mais simples:

     function MyControl($scope){ $scope.values = ["a","b","c","d","e","f"]; $scope.selectedIndex = -1; $scope.toggleSelect = function(ind){ if( ind === $scope.selectedIndex ){ $scope.selectedIndex = -1; } else{ $scope.selectedIndex = ind; } } $scope.getClass = function(ind){ if( ind === $scope.selectedIndex ){ return "selected"; } else{ return ""; } } $scope.getButtonLabel = function(ind){ if( ind === $scope.selectedIndex ){ return "Deselect"; } else{ return "Select"; } } } 
     .selected { color:red; } 
      
    • {{value}}

    Selected: {{selectedIndex}}

    Eu enfrentei um problema semelhante recentemente e decidi criar apenas um filtro condicional:

      angular.module('myFilters', []). /** * "if" filter * Simple filter useful for conditionally applying CSS classs and decouple * view from controller */ filter('if', function() { return function(input, value) { if (typeof(input) === 'string') { input = [input, '']; } return value? input[0] : input[1]; }; }); 

    Ele usa um único argumento, que é uma matriz de dois elementos ou uma sequência, que é transformada em uma matriz que é anexada a uma sequência vazia como o segundo elemento:

     
  • ...
  • Se você quiser ir além da avaliação binária e manter seu CSS fora do seu controlador, você pode implementar um filtro simples que avalia a input em um object do mapa:

     angular.module('myApp.filters, []) .filter('switch', function () { return function (input, map) { return map[input] || ''; }; }); 

    Isso permite que você escreva sua marcação assim:

     
    ...

    O operador ternário acaba de ser adicionado ao analisador angular em 1.1.5 .

    Então, a maneira mais simples de fazer isso é agora:

     ng:class="($index==selectedIndex)? 'selected' : ''" 

    O que eu fiz recentemente foi fazer isso:

      

    O valor isShowing é um valor localizado no meu controlador que é alternado com o clique de um botão e as partes entre os parênteses são as classs que criei no meu arquivo css.

    EDIT: Eu também gostaria de acrescentar que codeschool.com tem um curso gratuito que é patrocinado pelo google em AngularJS que vai sobre todas essas coisas e, em seguida, alguns. Não há necessidade de pagar por nada, apenas se inscrever para uma conta e seguir em frente! Boa sorte para todos vocês!

    Nós podemos fazer uma function para gerenciar a class de retorno com a condição

    insira a descrição da imagem aqui

      

    E depois

      

    AngularJS ng-class if example

    • {{icolor}}


    Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"

    • {{icolor}}

    Você pode consultar a página de códigos completa em ng-class se exemplo

    Eu sou novo no Angular, mas descobri isso para resolver o meu problema:

      

    Isso aplicará condicionalmente uma class baseada em um var. Ele começa com um download de ícone como padrão, usando ng-class, eu verifico o status de showDetails se true/false e aplico upload de ícone de class. Está funcionando muito bem.

    Espero que ajude.

    Ele funciona corretamente;)

      

    Isso provavelmente vai cair no esquecimento, mas aqui está como eu usei os operadores ternários do 1.1.5 para mudar as classs dependendo se uma linha em uma tabela é a primeira, a intermediária ou a última – exceto se houver apenas uma linha na tabela:

       

    Aqui está outra opção que funciona bem quando ng-class não pode ser usada (por exemplo, ao estilizar o SVG):

     ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

    (Eu acho que você precisa estar no mais recente Angular instável para usar ng-attr-, atualmente estou em 1.1.4)

    Bem, eu sugiro que você verifique a condição em seu controlador com uma function retornando verdadeiro ou falso .

     
    {{day.date}}

    e no seu controlador verifique a condição

     $scope.getTodayForHighLight = function(today, date){ return (today == date); } 

    parcial

       

    controlador

      $scope.campaign_range = "all"; $scope.change_range = function(range) { if (range === "all") { $scope.campaign_range = "all" } else { $scope.campaign_range = "thismonth" } }; 

    Isto está em meu trabalho juiz condicional múltiplo:

     
  • {{eOption.eoSequence}}     |     2020 元
  • Se você estiver usando pré-v1.1.5 angular (ou seja, sem operador ternário) e ainda quiser uma maneira equivalente de definir um valor em ambas as condições, poderá fazer algo assim:

     ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}" 

    Se você tem uma class comum que é aplicada a muitos elementos, você pode criar uma diretiva personalizada que irá adicionar essa class como ng-show / ng-hide.

    Esta diretiva adicionará a class ‘ativa’ ao botão se for clicada

     module.directive('ngActive', ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngActive, function ngActiveWatchAction(value){ $animate[value ? 'addClass' : 'removeClass'](element, 'active'); }); }; }]); 

    Mais informações

    Apenas adicionando algo que funcionou para mim hoje, depois de muita pesquisa …

     

    Espero que isso ajude em seu desenvolvimento bem sucedido.

    =)

    Sintaxe de expressão não documentada: ótimo link de site … =)

    Verifique http://www.codinginsight.com/angularjs-if-else-statement/

    O infame angularjs if else statement !!! Quando comecei a usar o Angularjs, fiquei um pouco surpreso por não conseguir encontrar uma instrução if / else.

    Então, eu estava trabalhando em um projeto e notei que, ao usar a instrução if / else, a condição é exibida durante o carregamento. Você pode usar o ng-cloak para consertar isso.

     

    Show this line

    Show this line instead

    .ng-cloak { display: none }

    Obrigado amadou

    Você pode usar este pacote npm. Ele lida com tudo e tem opções para classs estáticas e condicionais baseadas em uma variável ou uma function.

     // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } });