angularjs - example - Expresión angular de clase ng if-else

ngif else angular 6

Question

Estoy usando angularjs ng-class de la siguiente manera:

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

y me pregunté si puedo usar la expresión if-else, ¿puedo hacer algo similar a esto?

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

es decir, cada vez que call.State diferente del first o second uso de classC y no especifique cada valor.

¡Gracias!

Answer 1

Utilice instrucciones anidadas en línea if-then ( operadores ternarios )

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

por ejemplo :

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

Y asegúrese de que sea legible por sus colegas :)

Answer 2

Esta es la mejor y más confiable manera de hacer esto. Aquí hay un ejemplo simple y después de eso puede desarrollar su 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>

Answer 3

Las soluciones anteriores no funcionaron para mí en las clases con imágenes de fondo de alguna manera. Lo que hice fue crear una clase predeterminada (la que necesitas en else) y configurar class = ''defaultClass'' y luego la ng-class = "{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>

PD: Las clases que están en condición deben anular la clase predeterminada, es decir, marcadas como! Importantes

Answer 4

Puedes probar 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''}

Puede obtener detalles completos desde here .

Answer 5

Puedes probar usando una función como esa:

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

Luego pon tu lógica en la propia función:

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

Hice un violín con un ejemplo: http://jsfiddle.net/DotDotDot/nMk6M/

Answer 6

Tuve una situación en la que necesitaba dos afirmaciones ''si'' que pudieran ser verdaderas y una ''else'' o por defecto si ninguna de las dos era cierta, no estoy seguro de que esto sea una mejora en la respuesta de Jossef pero me pareció más limpio:

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

Donde value.one y value.two son verdaderos, toman precedente sobre la clase .else

Answer 7

Una solución mía es manipular una variable de modelo solo para el cambio de clase ng:

Por ejemplo, quiero cambiar de clase según el estado de mi lista:

1) Siempre que mi lista esté vacía, actualizo mi 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) Siempre que mi lista no esté vacía, establezco otro estado

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

3) Cuando mi lista no se toca, quiero dar otra clase (aquí es donde se inicia la página):

$scope.liststate = "init";

3) Uso este modelo adicional en mi clase ng:

ng-class="{''bg-empty'': liststate == ''empty'', ''bg-notempty'': liststate == ''notempty'', ''bg-init'': liststate = ''init''}"

Answer 8

Claramente Podemos hacer una función para devolver un nombre de clase CSS con el siguiente ejemplo completo.

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>

Y entonces

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

Puede consultar la página de códigos completa en ng-class si el ejemplo