AngularJS ng-if con múltiples condiciones

151

Me gustaría saber si es posible tener algo como esto:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

Sabiendo que los artículos son un contenedor JSON recibido a través de una solicitud, es por eso que estoy usando un método de clave y valor.

Gracias

Lo pregunto porque he intentado buscarlo en Google, pero el único resultado que pude obtener fue con ng-switch, pero tengo que usarlo ng-if.

TurnsCoffeeIntoScripts
fuente
3
En JavaScript, el operador o es ||.
JB Nizet

Respuestas:

194

Seguro que puede. Algo como:

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

Violín de demostración

Maxim Shoustin
fuente
Si tengo 20 campos de entrada y tengo que habilitar el botón Enviar solo si todos los campos están llenos. En este caso, tengo que incluir muchas condiciones. Esto es un poco confuso. ¿Hay alguna otra solución factible?
Mr_Perfect
@CharanCherry Eche un vistazo a la validación de forma angular. De esa manera, puede configurar todos los campos deseados ng-required y verificar la validez del formulario, por ejemplo, en una expresión ng-disabled en el botón de envío. cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT
76

Operador OR:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

A pesar de que es lo suficientemente simple de leer, espero que como desarrollador utilices mejores nombres que 'a' 'k' 'b', etc.

Por ejemplo:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Otro ejemplo O

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

Operador AND (para aquellos que tropiezan con esta respuesta de stackoverflow que buscan una condición AND en lugar de OR)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>
Tom Stickel
fuente
Ok, todos los navegadores parecen reconocerlo &como un personaje válido. Pero debe mencionarse que usar &un atributo no es html válido. Consulte < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, más específicamente: "Los valores de atributo son una mezcla de referencias de texto y caracteres, excepto con la restricción adicional de que el texto no puede contener un amperaje ambiguo. " Consulte también esta respuesta: < stackoverflow.com/a/5320217/788553 >.
jmlopez
Si debemos usar declaraciones compuestas en html para hacer un trabajo angular, preferiría poner las declaraciones compuestas en una función adjunta al alcance, eliminando así esa lógica de la sección html.
jmlopez
HTML5 no fue escrito con Angular en mente. En cambio, los chicos brillantes de Google escribieron Angular en su lugar: aprovechen la especificación y, por lo tanto, escribir una expresión angular con "&" es muy normal. Claro, prefiero no poner reglas de negocios en la Vista, al igual que cuando hago páginas de Vista Razor en asp.net MVC, pero mi respuesta está completamente dentro del contexto de la pregunta que se hace.
Tom Stickel
1
No hay nada de malo en tu respuesta Tom, también escribo declaraciones compuestas como las que muestras porque soy flojo (o tengo prisa), y funciona. Pero siempre recuerdo esta regla sobre escapar &. Esta es la razón por la que me topé con tu respuesta. Solo quería poner esos enlaces allí para que las personas conozcan las especificaciones HTML, como dijiste, "HTML5 no fue escrito con Angular en mente".
jmlopez
1

También puede probar con && para obtener una condición obligatoria si ambas condiciones son verdaderas que el trabajo

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>
Rizo
fuente
0

Código JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


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

Código HTML

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

Código JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}
Narasimhamurthy GN
fuente
¿Podría combinar sus respuestas en una y eliminar la otra?
Tom M