AngularJS ng-if mit mehreren Bedingungen


151

Ich würde gerne wissen, ob es möglich ist, so etwas zu haben:

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

Wenn ich weiß, dass es sich bei diesen Elementen um einen JSON-Container handelt, der über eine Anforderung empfangen wurde, verwende ich eine Schlüsselwertmethode.

Vielen Dank

Ich frage, weil ich versucht habe, es zu googeln, aber das einzige Ergebnis, das ich erzielen konnte, war ng-switch, aber ich muss es verwenden ng-if.


3
In JavaScript ist der Operator oder ||.
JB Nizet

Antworten:


194

Sicher kannst du. Etwas wie:

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 Geige


Wenn ich 20 Eingabefelder habe und die Schaltfläche "Senden" nur aktivieren muss, wenn alle Felder ausgefüllt sind. In diesem Fall muss ich so viele Bedingungen berücksichtigen. Das ist etwas verwirrend. Gibt es eine andere mögliche Lösung?
Mr_Perfect

@CharanCherry Sehen Sie sich die Validierung von Winkelformularen an. Auf diese Weise können Sie alle gewünschten Felder ng-erforderlich festlegen und die Gültigkeit des Formulars überprüfen, z. B. in einem ng-deaktivierten Ausdruck auf der Schaltfläche "Senden". cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT

76

ODER-Operator:

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

Obwohl es einfach genug zu lesen ist, hoffe ich, dass Sie als Entwickler bessere Namen verwenden als 'a' 'k' 'b' usw.

Beispielsweise:

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

Ein weiteres OP-Beispiel

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

AND-Operator (Für diejenigen, die über diese Stackoverflow-Antwort stolpern und nach einem AND anstelle einer OR-Bedingung suchen)

<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, alle Browser scheinen das &als gültiges Zeichen zu erkennen. Es sollte jedoch erwähnt werden, dass die Verwendung &in einem Attribut kein gültiges HTML ist. Siehe < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, genauer gesagt: "Attributwerte sind eine Mischung aus Text- und Zeichenreferenzen, mit der zusätzlichen Einschränkung, dass der Text kein mehrdeutiges kaufmännisches Und enthalten darf. "" Siehe auch diese Antwort: < stackoverflow.com/a/5320217/788553 >.
Jmlopez

Wenn wir zusammengesetzte Anweisungen in HTML verwenden müssen, um Winkelarbeit zu leisten, würde ich es vorziehen, die zusammengesetzten Anweisungen in eine Funktion einzufügen, die an den Bereich angehängt ist, um diese Logik aus dem HTML-Abschnitt zu entfernen.
Jmlopez

HTML5 wurde nicht für Angular geschrieben. Stattdessen haben die brillanten Leute bei Google stattdessen Angular geschrieben - nutzen Sie die Spezifikation und daher ist das Schreiben eines Angular-Ausdrucks mit "&" sehr normal. Sicher, ich ziehe es vor, keine Geschäftsregeln in die Ansicht einzufügen, genau wie wenn ich Razor View-Seiten in asp.net MVC mache, aber meine Antwort liegt vollständig im Kontext der gestellten Frage.
Tom Stickel

1
An Ihrer Antwort ist nichts auszusetzen, Tom. Ich schreibe auch zusammengesetzte Aussagen wie die, die Sie zeigen, weil ich faul bin (oder es eilig habe), und es funktioniert. Aber dann erinnere ich mich immer an diese Regel über die Flucht &. Dies ist der Grund, warum ich auf Ihre Antwort gestoßen bin. Ich wollte diese Links nur dort platzieren, um die Leute auf die HTML-Spezifikation aufmerksam zu machen, wie Sie sagten: "HTML5 wurde nicht für Angular geschrieben".
Jmlopez

1

Sie können auch mit && für die obligatorische Konstante versuchen, wenn beide Bedingungen wahr sind als die Arbeit

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

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

0

JavaScript-Code

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

HTML Quelltext

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

JavaScript-Code

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

Könnten Sie bitte Ihre Antworten in einer kombinieren und die andere löschen?
Tom M
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.