AngularJS ng-if com várias condições

151

Gostaria de saber se é possível ter algo parecido com isto:

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

Sabendo que esses itens são um contêiner JSON recebido por meio de uma solicitação, é por isso que estou usando um método de chave e valor.

obrigado

Estou perguntando porque tentei pesquisar no Google, mas o único resultado que pude obter foi com ng-switch, mas preciso usar ng-if.

TurnsCoffeeIntoScripts
fonte
3
Em JavaScript, o operador ou é ||.
JB Nizet

Respostas:

194

Certamente você pode. 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'];

Violino de demonstração

Maxim Shoustin
fonte
Se eu tiver 20 campos de entrada e precisar ativar o botão enviar apenas se todos os campos estiverem preenchidos. Nesse caso, tenho que incluir muitas condições. Isso é um pouco confuso. Existe alguma outra solução viável?
Mr_Perfect
@CharanCherry Dê uma olhada na validação de formulário angular. Dessa forma, você pode definir todos os campos desejados ng-required e verificar a validade do formulário em, por exemplo, uma expressão ng-disabled no botão enviar. cfr fdietz.github.io/recipes-with-angular-js/using-forms/...
Gecko TI
76

Operador OR:

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

Embora seja simples de ler, espero que como desenvolvedor você use nomes melhores que 'a' 'k' 'b' etc.

Por exemplo:

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

Outro exemplo de OR

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

Operador AND (para aqueles que se deparam com essa resposta de stackoverflow procurando uma condição AND em vez 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
fonte
Ok, todos os navegadores parecem reconhecer &como um caractere válido. Mas deve-se mencionar que o uso &em um atributo não é um html válido. Consulte < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, mais especificamente: "Os valores dos atributos são uma mistura de referências de texto e caracteres, exceto com a restrição adicional de que o texto não pode conter um e comercial ambíguo. " Consulte também esta resposta: < stackoverflow.com/a/5320217/788553 >.
jmlopez
Se precisarmos usar instruções compostas em html para fazer um trabalho angular, prefiro colocar as instruções compostas em uma função anexada ao escopo, removendo essa lógica da seção html.
jmlopez
O HTML5 não foi escrito com o Angular em mente. Em vez disso, os caras brilhantes do google escreveram para o Angular - tirar proveito das especificações e, assim, escrever uma Expressão Angular com "&" é muito normal. Claro, prefiro não colocar regras de negócios no View, assim como quando uso as páginas do Razor View no asp.net MVC, mas minha resposta está completamente dentro do contexto da pergunta que está sendo feita.
Tom Stickel #
1
Não há nada de errado com sua resposta, Tom, também escrevo declarações compostas como as que você mostra porque sou preguiçosa (ou com pressa), e funciona. Mas então eu sempre me lembro dessa regra sobre escapar &. Esta é a razão pela qual me deparei com sua resposta. Eu só queria colocar esses links lá para conscientizar as pessoas sobre as especificações HTML, como você disse: "HTML5 não foi escrito com o Angular em mente".
jmlopez
1

você também pode tentar com && para obter informações obrigatórias se ambas as condições forem verdadeiras e não o trabalho

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

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>
Rizo
fonte
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
fonte
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
fonte
Você poderia combinar suas respostas em uma e excluir a outra?
6132 Tom M #