Bedingte Logik in der AngularJS-Vorlage

Ich habe eine eckige Vorlage, die so aussieht ...

<div ng-repeat="message in data.messages" ng-class="message.type">

    <div class="info">
        <div class="type"></div>
        <div class="from">From Avatar</div>
        <div class="createdBy">Created By Avatar</div>
        <div class="arrowTo">
            <div class="arrow"></div>
            <div class="to">To Avatar</div>
        </div>
        <div class="date">
            <div class="day">25</div>
            <div class="month">Dec</div>
        </div>
    </div>

    <div class="main">
        <div class="content">
            <div class="heading2">{{message.title}}</div>
            <div ng-bind-html="message.content"></div>
        </div>

    </div>

    <br />
    <hr />
    <br />

</div>

Ich habe eine JSfiddle eingerichtet , um die gebundenen Daten anzuzeigen .

Was ich tun muss, ist, die Divisionen "von", "nach" und "Pfeil nach" abhängig vom Inhalt der Daten bedingt anzuzeigen.

Das Protokoll ist das ...

• Wenn die Daten ein "from" -Objekt enthalten, zeigen Sie das "from" -Div an und binden Sie die Daten, zeigen Sie jedoch nicht das "createdBy" -Div an.
• Wenn es kein "from" -Objekt gibt, aber ein "createdBy" -Objekt, zeigen Sie das div "createdBy" an und binden Sie die Daten.
• Wenn die Daten ein "to" -Objekt enthalten, zeigen Sie das div "Pfeil nach" an und binden Sie die Daten.

Oder im Klartext, wenn es eine Absenderadresse gibt, zeigen Sie sie an, andernfalls zeigen Sie, wer den Datensatz stattdessen erstellt hat, und wenn es eine Absenderadresse gibt, zeigen Sie dies auch.

Ich habe mir überlegt, ng-switch zu verwenden, aber ich denke, ich müsste zusätzliches Markup hinzufügen, das ein leeres div hinterlässt, wenn es keine Daten gibt. Außerdem müsste ich Switch-Direktiven verschachteln und bin mir nicht sicher, ob das funktionieren würde.

Irgendwelche Ideen?

AKTUALISIEREN:

Wenn ich meine eigene Direktive schreiben würde (wenn ich wüsste wie!), Dann ist hier ein Pseudocode, um zu zeigen, wie ich ihn verwenden möchte ...

<div ng-if="showFrom()">
    From Template Goes Here
</div>
<div ng-if="showCreatedBy()">
    CreatedBy Template Goes Here
</div>
<div ng-if="showTo()">
    To Template Goes Here
</div>

Jedes von diesen würde verschwinden, wenn die Funktion / der Ausdruck als falsch bewertet würde.

Angular 1.1.5 führte die ng-if- Direktive ein. Das ist die beste Lösung für dieses spezielle Problem. Wenn Sie eine ältere Version von Angular verwenden, sollten Sie die ui-if- Direktive von angle- ui verwenden .

Wenn Sie hier angekommen sind und nach Antworten auf die allgemeine Frage "Bedingte Logik in Vorlagen" suchen, sollten Sie auch Folgendes berücksichtigen:

• 1.1.5 führte auch einen ternären Operator ein
• Mit dem ng-Schalter können Elemente bedingt zum DOM hinzugefügt oder daraus entfernt werden
• Siehe auch Wie wende ich CSS-Stile in AngularJS bedingt an?

Ursprüngliche Antwort:

Hier ist eine nicht so großartige "ng-if" -Richtlinie:

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

das erlaubt diese HTML-Syntax:

<div ng-repeat="message in data.messages" ng-class="message.type">
   <hr>
   <div ng-if="showFrom(message)">
       <div>From: {{message.from.name}}</div>
   </div>    
   <div ng-if="showCreatedBy(message)">
      <div>Created by: {{message.createdBy.name}}</div>
   </div>    
   <div ng-if="showTo(message)">
      <div>To: {{message.to.name}}</div>
   </div>    
</div>

Geige .

replaceWith () wird verwendet, um nicht benötigten Inhalt aus dem DOM zu entfernen.

Wie bereits auf Google+ erwähnt, kann ng-style wahrscheinlich zum bedingten Laden von Hintergrundbildern verwendet werden, falls Sie ng-show anstelle einer benutzerdefinierten Direktive verwenden möchten. (Zum Nutzen anderer Leser erklärte Jon auf Google+: "Beide Methoden verwenden ng-show, was ich zu vermeiden versuche, weil es display: none verwendet und zusätzliches Markup im DOM hinterlässt. Dies ist ein besonderes Problem in diesem Szenario, weil Das versteckte Element hat ein Hintergrundbild, das in den meisten Browsern noch geladen wird. ").
Siehe auch Wie wende ich CSS-Stile in AngularJS bedingt an?

Das Winkel-ui ui-wenn Direktive überwacht Änderungen an der If-Bedingung / dem If-Ausdruck. Meins nicht. Während meine einfache Implementierung die Ansicht korrekt aktualisiert, wenn sich das Modell so ändert, dass sie nur die Vorlagenausgabe beeinflusst, wird die Ansicht nicht korrekt aktualisiert, wenn sich die Bedingung / Ausdrucksantwort ändert.

Wenn sich beispielsweise der Wert eines from.name im Modell ändert, wird die Ansicht aktualisiert. Wenn Sie dies tun delete $scope.data.messages[0].from, wird der from-Name aus der Ansicht entfernt, die Vorlage jedoch nicht aus der Ansicht, da die if-Bedingung / der if-Ausdruck nicht überwacht wird.

Sie könnten die ngSwitch- Direktive verwenden:

  <div ng-switch on="selection" >
    <div ng-switch-when="settings">Settings Div</div>
    <span ng-switch-when="home">Home Span</span>
    <span ng-switch-default>default</span>
  </div>

Wenn Sie nicht möchten, dass das DOM mit leeren Divs geladen wird, müssen Sie Ihre benutzerdefinierte Direktive mit $ http erstellen, um die (Unter-) Vorlagen zu laden, und $ compile, um sie in das DOM einzufügen, wenn eine bestimmte Bedingung erreicht ist.

Dies ist nur ein (ungetestetes) Beispiel. Es kann und sollte optimiert werden:

HTML:

<conditional-template ng-model="element" template-url1="path/to/partial1" template-url2="path/to/partial2"></div>

Richtlinie:

app.directive('conditionalTemplate', function($http, $compile) {
   return {
      restrict: 'E',
      require: '^ngModel',
      link: function(sope, element, attrs, ctrl) {
        // get template with $http
        // check model via ctrl.$viewValue
        // compile with $compile
        // replace element with element.replaceWith()
      }
   };
});

Sie können ng-show für jedes div-Element in der Schleife verwenden. Wollten Sie das: http://jsfiddle.net/pGwRu/2/ ?

<div class="from" ng-show="message.from">From: {{message.from.name}}</div>