Inline-Bedingungen in angle.js

Ich habe mich gefragt, ob es in Angular eine Möglichkeit gibt, Inhalte bedingt anzuzeigen, außer ng-show usw. Zum Beispiel in backbone.js könnte ich etwas mit Inline-Inhalten in einer Vorlage tun, wie:

<% if (myVar === "two") { %> show this<% } %>

Aber im Winkel beschränke ich mich anscheinend darauf, Dinge in HTML-Tags zu zeigen und zu verstecken

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

Was ist die empfohlene Methode in Angular, um Inline-Inhalte in Angular nur mit {{}} bedingt anzuzeigen und auszublenden, anstatt sie in HTML-Tags zu verpacken?

EDIT: 2Toads Antwort ist genau das, wonach Sie suchen! Stimmen Sie das Ding ab

Wenn Sie Angular <= 1.1.4 verwenden, reicht diese Antwort aus:

Noch eine Antwort darauf. Ich poste eine separate Antwort, da es sich eher um einen "exakten" Lösungsversuch als um eine Liste möglicher Lösungen handelt:

Hier ist ein Filter, der ein "sofortiges Wenn" ausführt (auch bekannt als iif):

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

und kann wie folgt verwendet werden:

{{foo == "bar" | iif : "it's true" : "no, it's not"}}

Angular 1.1.5 hat Unterstützung für ternäre Operatoren hinzugefügt:

{{myVar === "two" ? "it's true" : "it's false"}}

Tausende Möglichkeiten, diese Katze zu häuten. Mir ist klar, dass Sie speziell zwischen {{}} fragen, aber für andere, die hierher kommen, lohnt es sich, einige der anderen Optionen aufzuzeigen.

Funktion auf Ihrem $ scope (IMO, dies ist in den meisten Szenarien die beste Wahl):

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

ng-show und ng-hide natürlich:

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

Ein benutzerdefinierter Filter, wie Bertrand vorgeschlagen hat. (Dies ist Ihre beste Wahl, wenn Sie immer wieder das Gleiche tun müssen.)

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

Oder eine benutzerdefinierte Anweisung:

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

Persönlich würde ich in den meisten Fällen eine Funktion in meinem Bereich verwenden, die das Markup ziemlich sauber hält und schnell und einfach zu implementieren ist. Es sei denn, Sie werden immer und immer wieder genau das Gleiche tun. In diesem Fall würde ich Bertrands Vorschlag folgen und je nach den Umständen einen Filter oder möglicherweise eine Direktive erstellen.

Wie immer ist das Wichtigste, dass Ihre Lösung einfach zu warten und hoffentlich testbar ist. Und das hängt ganz von Ihrer spezifischen Situation ab.

Ich verwende Folgendes, um die Klasse attr bedingt festzulegen, wenn ng-class nicht verwendet werden kann (zum Beispiel beim Stylen von SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

Der gleiche Ansatz sollte für andere Attributtypen funktionieren.

(Ich denke, Sie müssen auf dem neuesten instabilen Angular sein, um ng-attr- verwenden zu können. Ich bin derzeit auf 1.1.4)

Ich habe einen Artikel über die Arbeit mit AngularJS + SVG veröffentlicht, der über dieses und verwandte Themen spricht. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Zum Überprüfen eines variablen Inhalts und eines Standardtexts können Sie Folgendes verwenden:

<span>{{myVar || 'Text'}}</span>

Wenn ich dich gut verstanden habe, denke ich, dass du zwei Möglichkeiten hast, es zu tun.

Erstens könnten Sie ngSwitch ausprobieren und der zweite Weg wäre, einen eigenen Filter zu erstellen . Wahrscheinlich ist ngSwitch der richtige Ansatz, aber wenn Sie Inline-Inhalte nur mit dem {{}} Filter ausblenden oder anzeigen möchten, ist dies der richtige Weg.

Hier ist eine Geige mit einem einfachen Filter als Beispiel.

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

Die Angular UI-Bibliothek verfügt über eine integrierte Direktive ui-if für Bedingungen in Vorlagen / Ansichten bis zu Angular UI 1.1.4

Beispiel: Unterstützung in Angular UI bis UI 1.1.4

<div ui-if="array.length>0"></div>

ng-falls in allen Winkelversionen nach 1.1.4 verfügbar

<div ng-if="array.length>0"></div>

Wenn Sie Daten in der Array-Variablen haben, wird nur das div angezeigt

Also mit Angular 1.5.1 (hatte vorhandene App-Abhängigkeit von einigen anderen MEAN-Stack-Abhängigkeiten, warum ich derzeit nicht 1.6.4 verwende)

Das funktioniert bei mir wie das OP-Sprichwort {{myVar === "two" ? "it's true" : "it's false"}}

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}

Wenn Sie "Keine" anzeigen möchten, wenn der Wert "0" ist, können Sie Folgendes verwenden:

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

oder wahr falsch in eckigen js

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>

Funktioniert auch in exotischen Situationen:

<br ng-show="myCondition == true" />

Ich werde meine in die Mischung werfen:

https://gist.github.com/btm1/6802312

Dies wertet die if-Anweisung einmal aus und fügt keinen Watch-Listener hinzu, ABER Sie können dem Element mit dem set-if-Wert wait-for = "somedata.prop" ein zusätzliches Attribut hinzufügen, das darauf wartet, dass diese Daten oder Eigenschaften zuvor festgelegt werden einmalige Auswertung der if-Anweisung. Dieses zusätzliche Attribut kann sehr praktisch sein, wenn Sie auf Daten aus einer XHR-Anforderung warten.

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });