if within an ng-class in the angularJS

Question

if within an ng-class in the angularJS

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

2

Why can not I do this next check in my ng-class?

setClass(sessao.tipo_2 != 3D ? sessao.tipo_3:sessao.tipo_2)"

According to the short-if logic, this syntax is right?

angularjs

asked by anonymous 28.03.2016 / 22:51

3 answers

How to create a valid clickable image for W3C? PHP Works Local (XAMPP - PHP 5.5.33) but does not work on Server (PHP 5.5.31)

score 3 · Answer 1

The short-if is correct. However, ng-class has a different evaluation behavior. You are calling a function ( setClass ) that will not be re-evaluated.

Since Angular works with dirty-checking , you have two possibilities:

Populate a variable in the $ scope containing the final value of the class you want to use; or
Perform a simple short-if evaluation, with no function call.

Examples below:

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

score 1 · Answer 2

data-ng-class="{'classeAqui': sessao.tipo_2 != 3D, 'classeAqui':  sessao.tipo_2 == 3D }"

You must enter a configuration JSON for the ng-class where you will pass key: Class value: condition.

Objeto = { key : condição }

score 0 · Answer 3

0

I do not know if you already got the answer, but the same question appeared to me now and I used it like this:

<div ng-class="minha_variavel > 0 ? 'col-md-6' : 'col-md-12'"></div>

10.11.2017 / 18:48