AngularJS ng-if z wieloma warunkami


151

Chciałbym wiedzieć, czy można mieć coś takiego:

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

Wiedząc, że elementy to kontener JSON otrzymany za pośrednictwem żądania, dlatego używam metody klucz, wartość.

Dzięki

Pytam, ponieważ próbowałem google, ale jedyny wynik, jaki mogłem uzyskać, to ng-switch, ale muszę go użyć ng-if.


3
W JavaScript operatorem lub jest ||.
JB Nizet

Odpowiedzi:


194

Oczywiście że możesz. Coś jak:

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'];

Demo Fiddle


Jeśli mam 20 pól wejściowych i muszę włączyć przycisk przesyłania tylko wtedy, gdy wszystkie pola są wypełnione. W tym przypadku muszę uwzględnić tak wiele warunków. To jest trochę zagmatwane. Czy jest jakieś inne możliwe rozwiązanie?
Mr_Perfect

@CharanCherry Zapoznaj się z walidacją formularzy kątowych. W ten sposób możesz ustawić wszystkie żądane pola ng-required i sprawdzić poprawność formularza na przykład w wyrażeniu z wyłączoną funkcją ng na przycisku wysyłania. cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT

76

Operator OR:

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

Chociaż jest to dość proste do przeczytania, mam nadzieję, że jako programista używasz lepszych nazw niż „a” „k” „b” itp.

Na przykład:

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

Kolejny przykład OR

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

Operator AND (dla tych, którzy natkną się na tę odpowiedź przepełnienia stosu, szukając warunku AND zamiast 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>

Ok, więc wszystkie przeglądarki wydają się rozpoznawać &znak jako prawidłowy. Należy jednak wspomnieć, że użycie &atrybutu nie jest prawidłowym kodem HTML. Zobacz < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, a dokładniej: „Wartości atrybutów to mieszanka odwołań do tekstu i znaków, z wyjątkiem dodatkowego ograniczenia, że ​​tekst nie może zawierać niejednoznacznych ampersandów. " Zobacz także tę odpowiedź: < stackoverflow.com/a/5320217/788553 >.
jmlopez

Jeśli musimy używać instrukcji złożonych w html, aby działać kątowo, wolałbym umieścić instrukcje złożone w funkcji dołączonej do zakresu, usuwając w ten sposób tę logikę z sekcji html.
jmlopez

HTML5 nie został napisany z myślą o Angular. Zamiast tego genialni faceci z Google napisali Angular, aby zamiast tego - skorzystać ze specyfikacji i napisanie wyrażenia kątowego z „&” jest bardzo normalne. Oczywiście wolę nie umieszczać reguł biznesowych w widoku, tak jak w przypadku stron widoku Razor w asp.net MVC, ale moja odpowiedź jest całkowicie zgodna z kontekstem zadawanego pytania.
Tom Stickel

1
Nie ma nic złego w Twojej odpowiedzi Tom, piszę również zdania złożone, takie jak te, które pokazujesz, ponieważ jestem leniwy (lub spieszę się) i to działa. Ale potem zawsze pamiętam tę zasadę ucieczki &. To jest powód, dla którego natknąłem się na twoją odpowiedź. Chciałem tylko umieścić tam te linki, aby ludzie byli świadomi specyfikacji HTML, tak jak powiedziałeś: „HTML5 nie został napisany z myślą o Angular”.
jmlopez

1

możesz również spróbować z && dla warunku obowiązkowego, jeśli oba warunki są prawdziwe niż praca

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

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

0

Kod 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";
}
}

0

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

Kod 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";
}
}

Czy mógłbyś połączyć swoje odpowiedzi w jedną i usunąć drugą?
Tom M
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.