warunkowe inline w angular.js

Zastanawiałem się, czy istnieje kątowy sposób warunkowego wyświetlania treści inny niż użycie ng-show itp. Na przykład w backbone.js mógłbym zrobić coś z zawartością wbudowaną w szablonie, takim jak:

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

ale pod kątem wydaje się, że ograniczam się do pokazywania i ukrywania rzeczy owiniętych w tagi HTML

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

Jaki jest zalecany sposób wyświetlania kątowego warunkowego wyświetlania i ukrywania treści wbudowanych w angularu za pomocą {{}} zamiast zawijania zawartości w tagach HTML?

EDYCJA: Odpowiedź 2Toad poniżej jest tym, czego szukasz! Głosuj za tym

Jeśli używasz Angulara <= 1.1.4, ta odpowiedź zrobi:

Jeszcze jedna odpowiedź na to. Podaję osobną odpowiedź, ponieważ jest to bardziej „dokładna” próba rozwiązania niż lista możliwych rozwiązań:

Oto filtr, który wykona „natychmiastowe, jeśli” (alias iif):

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

i mogą być używane w następujący sposób:

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

Dodano obsługę Angular 1.1.5 dla operatorów trójskładnikowych:

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

Tysiące sposobów na skórowanie tego kota. Zdaję sobie sprawę, że pytasz konkretnie o {{}}, ale dla innych, którzy tu przychodzą, myślę, że warto pokazać inne opcje.

funkcja na $ zakres (IMO, to jest twój najlepszy zakład w większości scenariuszy):

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

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

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

ng-show i ng-hide oczywiście:

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

Filtr niestandardowy, jak sugerował Bertrand. (jest to najlepszy wybór, jeśli musisz robić to samo w kółko)

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

{{foo | myFilter}}

Lub niestandardowa dyrektywa:

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>

Osobiście w większości przypadków korzystałbym z funkcji w moim zasięgu, która utrzymuje znaczniki w czystości, a jego wdrożenie jest szybkie i łatwe. Chyba że, to znaczy, będziesz robić to samo od nowa w kółko, w takim przypadku skorzystałbym z sugestii Bertranda i stworzyłbym filtr lub ewentualnie dyrektywę, w zależności od okoliczności.

Jak zawsze najważniejsze jest to, że Twoje rozwiązanie jest łatwe w utrzymaniu i, mam nadzieję, że można je przetestować. A to całkowicie zależy od konkretnej sytuacji.

Korzystam z następujących opcji, aby warunkowo ustawić klasę attr, gdy nie można użyć klasy ng (na przykład podczas stylowania SVG):

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

To samo podejście powinno działać w przypadku innych typów atrybutów.

(Myślę, że musisz używać najnowszego niestabilnego Angulara, aby używać ng-attr-, aktualnie jestem na wersji 1.1.4)

Opublikowałem artykuł o pracy z AngularJS + SVG, który mówi o tym i powiązanych zagadnieniach. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Aby sprawdzić zmienną zawartość i mieć domyślny tekst, możesz użyć:

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

Jeśli dobrze cię zrozumiałem, myślę, że masz na to dwa sposoby.

Najpierw możesz wypróbować ngSwitch, a drugim możliwym sposobem byłoby stworzenie własnego filtra . Prawdopodobnie ngSwitch jest właściwym podejściem, ale jeśli chcesz ukryć lub pokazać zawartość wbudowaną tylko za pomocą filtra {{}}, możesz to zrobić.

Oto skrzypce z prostym filtrem jako przykładem.

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

Biblioteka Angular UI ma wbudowaną dyrektywę ui-if dla warunku w szablonie / Widoki do angular ui 1.1.4

Przykład: Wsparcie w Angular UI upto ui 1.1.4

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

ng-jeśli jest dostępny we wszystkich wersjach kątowych po 1.1.4

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

jeśli masz jakieś dane w zmiennej tablicowej, pojawi się tylko div

Tak więc w Angular 1.5.1 (istniała zależność aplikacji od niektórych innych zależności stosu MEAN, dlatego obecnie nie używam 1.6.4)

Działa to dla mnie, jak mówi OP {{myVar === "two" ? "it's true" : "it's false"}}

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

jeśli chcesz wyświetlić „Brak”, gdy wartość wynosi „0”, możesz użyć jako:

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

lub true false w kątowym js

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

Działa nawet w egzotycznych sytuacjach:

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

Wrzucę moje do miksu:

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

ocenia to raz instrukcję if i nie dodaje nasłuchiwania, ALE można dodać dodatkowy atrybut do elementu, który ma zestaw-if o nazwie wait-for = "somedata.prop" i będzie czekał na ustawienie tych danych lub właściwości przed jednorazowa ocena instrukcji if. ten dodatkowy atrybut może być bardzo przydatny, jeśli czekasz na dane z żądania XHR.

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');
              });
            }
          }
        };
      }
    };
  });