angular.js içindeki satır içi koşullar

Koşullu olarak ng-show vb kullanmaktan başka içeriği görüntülemek için bir yol olup olmadığını merak ediyordum. Örneğin backbone.js'de ben gibi bir şablonda satır içi içerik ile bir şey yapabilirdi:

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

ancak açısal olarak, html etiketlerine sarılmış şeyleri göstermek ve gizlemekle sınırlı görünüyorum

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

İçeriği html etiketlerine sarmak yerine yalnızca {{}} kullanarak satır içi içeriği açısal olarak koşullu olarak göstermek ve gizlemek için açısal olarak önerilen yol nedir?

DÜZENLEME: 2Aşağıdaki cevabı aradığınız şey! O şeyi oyla

Açısal <= 1.1.4 kullanıyorsanız, bu cevap şunları yapacaktır:

Bunun için bir cevap daha. Ayrı bir cevap gönderiyorum, çünkü bir çözüm için olası çözümlerin bir listesinden çok "kesin" bir girişimdir:

İşte "hemen if" (aka iif) yapacak bir filtre:

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

ve şu şekilde kullanılabilir:

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

Üçlü operatörler için açısal 1.1.5 ek destek:

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

Bu kediyi yüzmek için binlerce yol. {{}} Arasında özel olarak sorduğunuzun farkındayım, ancak buraya gelen diğerleri için, diğer seçeneklerden bazılarını göstermeye değer olduğunu düşünüyorum.

$ kapsamınızda (IMO, çoğu senaryoda en iyi bahsiniz):

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

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

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

ng-show ve ng-hide tabii ki:

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

Bertrand'ın önerdiği gibi özel bir filtre. (aynı şeyi tekrar tekrar yapmak zorundaysanız, bu en iyi seçimdir)

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

{{foo | myFilter}}

Veya özel bir direktif:

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>

Şahsen, çoğu durumda kapsamımdaki bir işlevle giderdim, işaretlemeyi oldukça temiz tutar ve uygulanması hızlı ve kolaydır. Tabii, aynı şeyi tekrar tekrar yapacağınız sürece, bu durumda Bertrand'ın önerisiyle gidip koşullara bağlı olarak bir filtre veya muhtemelen bir yönerge oluşturacağım.

Her zaman olduğu gibi , en önemli şey çözümünüzün bakımı kolay ve umarım test edilebilir olmasıdır. Ve bu tamamen sizin özel durumunuza bağlı olacaktır.

Ng sınıfı kullanılamaz (örneğin SVG stil) zaman koşullu olarak sınıf attr ayarlamak için aşağıdaki kullanıyorum:

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

Aynı yaklaşım diğer özellik türleri için de geçerli olmalıdır.

(Ng-attr- kullanmak için en son dengesiz açısal olmanız gerektiğini düşünüyorum, şu anda 1.1.4'deyim)

AngularJS + SVG ile çalışma hakkında bu ve ilgili konular hakkında konuşan bir makale yayınladım. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Değişken bir içeriği kontrol etmek ve varsayılan bir metne sahip olmak için şunları kullanabilirsiniz:

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

Eğer seni iyi anladıysam, bunu yapmanın iki yolu olduğunu düşünüyorum.

İlk olarak ngSwitch'i deneyebilirsiniz ve ikinci olası yol kendi filtrenizi oluşturmak olacaktır . Muhtemelen ngSwitch doğru yaklaşımdır, ancak satır içi içeriği gizlemek veya göstermek istiyorsanız, yalnızca {{}} filtre kullanarak gitmek için yoldur.

İşte örnek olarak basit bir filtreye sahip bir keman .

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

Açısal UI kütüphanesi, şablon /

Örnek: 1.1.4'e kadar Açısal UI'de destek

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

ng-1.1.4'ten sonraki tüm açısal versiyonlarda mevcutsa

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

dizi değişkeninde herhangi bir veri varsa, yalnızca div görüntülenir

Yani Açısal 1.5.1 ile (diğer MEAN yığın bağımlılıklarına mevcut uygulama bağımlılığı vardı, neden şu anda 1.6.4 kullanmıyorum)

Bu benim için OP'nin söylediği gibi çalışıyor {{myVar === "two" ? "it's true" : "it's false"}}

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

değer "0" olduğunda "Hiçbiri" ni görüntülemek istiyorsanız, şu şekilde kullanabilirsiniz:

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

veya açısal j'lerde gerçek yanlış

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

Egzotik durumlarda bile çalışır:

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

Karışımı benimkine atacağım:

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

bu, if ifadesini bir kez değerlendirir ve izleme dinleyicisi eklemez, ancak bekle-for = "somedata.prop" adlı set-if öğesine sahip öğeye ek bir özellik ekleyebilirsiniz ve bu verilerin veya özelliğin daha önce ayarlanmasını bekleyecektir if ifadesini bir kez değerlendirmek. bir XHR isteğinden veri bekliyorsanız bu ek özellik çok kullanışlı olabilir.

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