Skip to main content
adicionou 4 caracteres ao conteúdo
Fonte Link
OnoSendai
  • 37mil
  • 3
  • 68
  • 120

O short-if está correto. Entretanto ng-class possui um comportamento de avaliação diferenciado. Você está chamando uma função(setClass) que não será re-avaliada.

já que o Angular trabalha com dirty-checking, você tem duas possibilidades:

  • Popule uma variávlevariável no $scope$scope contendo o valor final da classe que deseja utilizar; ou
  • realize uma avaliação short-ifshort-if simples, sem chamada de função.

Exemplos abaixo:

function SampleController($scope) {
  
  $scope.sessao = {
    tipo_2: 'D3',
    tipo_3: 'D4'
    }
  
  $scope.variavelDeClasse = $scope.sessao.tipo_3;
 
}
.D3{
  color:red;
  }

.D4{
  color:blue;
  }
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <div ng-class='variavelDeClasse'>Exemplo do 1º tipo</div>
      
      <div ng-class='sessao.tipo_2 != "D3" ? sessao.tipo_3 : sessao.tipo_2'>Exemplo do 2º tipo</div>
    </div>
  </body>
</html>

O short-if está correto. Entretanto ng-class possui um comportamento de avaliação diferenciado. Você está chamando uma função(setClass) que não será re-avaliada.

já que o Angular trabalha com dirty-checking, você tem duas possibilidades:

  • Popule uma variávle no $scope contendo o valor final da classe que deseja utilizar; ou
  • realize uma avaliação short-if simples, sem chamada de função.

Exemplos abaixo:

function SampleController($scope) {
  
  $scope.sessao = {
    tipo_2: 'D3',
    tipo_3: 'D4'
    }
  
  $scope.variavelDeClasse = $scope.sessao.tipo_3;
 
}
.D3{
  color:red;
  }

.D4{
  color:blue;
  }
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <div ng-class='variavelDeClasse'>Exemplo do 1º tipo</div>
      
      <div ng-class='sessao.tipo_2 != "D3" ? sessao.tipo_3 : sessao.tipo_2'>Exemplo do 2º tipo</div>
    </div>
  </body>
</html>

O short-if está correto. Entretanto ng-class possui um comportamento de avaliação diferenciado. Você está chamando uma função(setClass) que não será re-avaliada.

já que o Angular trabalha com dirty-checking, você tem duas possibilidades:

  • Popule uma variável no $scope contendo o valor final da classe que deseja utilizar; ou
  • realize uma avaliação short-if simples, sem chamada de função.

Exemplos abaixo:

function SampleController($scope) {
  
  $scope.sessao = {
    tipo_2: 'D3',
    tipo_3: 'D4'
    }
  
  $scope.variavelDeClasse = $scope.sessao.tipo_3;
 
}
.D3{
  color:red;
  }

.D4{
  color:blue;
  }
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <div ng-class='variavelDeClasse'>Exemplo do 1º tipo</div>
      
      <div ng-class='sessao.tipo_2 != "D3" ? sessao.tipo_3 : sessao.tipo_2'>Exemplo do 2º tipo</div>
    </div>
  </body>
</html>

Fonte Link
OnoSendai
  • 37mil
  • 3
  • 68
  • 120

O short-if está correto. Entretanto ng-class possui um comportamento de avaliação diferenciado. Você está chamando uma função(setClass) que não será re-avaliada.

já que o Angular trabalha com dirty-checking, você tem duas possibilidades:

  • Popule uma variávle no $scope contendo o valor final da classe que deseja utilizar; ou
  • realize uma avaliação short-if simples, sem chamada de função.

Exemplos abaixo:

function SampleController($scope) {
  
  $scope.sessao = {
    tipo_2: 'D3',
    tipo_3: 'D4'
    }
  
  $scope.variavelDeClasse = $scope.sessao.tipo_3;
 
}
.D3{
  color:red;
  }

.D4{
  color:blue;
  }
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <div ng-class='variavelDeClasse'>Exemplo do 1º tipo</div>
      
      <div ng-class='sessao.tipo_2 != "D3" ? sessao.tipo_3 : sessao.tipo_2'>Exemplo do 2º tipo</div>
    </div>
  </body>
</html>