conditional inline dalam angular.js

Saya bertanya-tanya apakah ada cara di sudut untuk menampilkan konten selain menggunakan ng-show dll. Misalnya di backbone.js saya bisa melakukan sesuatu dengan konten inline dalam template seperti:

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

tetapi dalam sudut, saya tampaknya terbatas untuk menunjukkan dan menyembunyikan hal-hal yang dibungkus dengan tag html

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

Apa cara yang disarankan dalam sudut untuk menunjukkan dan menyembunyikan konten sebaris secara kondisional hanya menggunakan {{}} daripada membungkus konten dalam tag html?

Sunting : Jawaban 2Toad di bawah ini adalah yang Anda cari! Suara positif hal itu

Jika Anda menggunakan Angular <= 1.1.4 maka jawaban ini akan membantu:

Satu jawaban lagi untuk ini. Saya memposting jawaban terpisah, karena ini lebih merupakan upaya "tepat" pada solusi daripada daftar solusi yang mungkin:

Berikut filter yang akan melakukan "segera jika" (alias iif):

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

dan bisa digunakan seperti ini:

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

1.1.5 ditambahkan dukungan sudut untuk operator ternary:

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

Ribuan cara menguliti kucing ini. Saya sadar Anda bertanya tentang antara {{}} secara khusus, tetapi untuk orang lain yang datang ke sini, saya pikir ada baiknya menampilkan beberapa opsi lain.

berfungsi pada $ scope Anda (IMO, ini adalah taruhan terbaik Anda di sebagian besar skenario):

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

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

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

ng-show dan ng-hide tentu saja:

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

Filter kustom seperti yang disarankan Bertrand. (ini adalah pilihan terbaik Anda jika Anda harus melakukan hal yang sama berulang kali)

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

{{foo | myFilter}}

Atau arahan khusus:

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>

Secara pribadi, dalam kebanyakan kasus saya akan pergi dengan fungsi pada lingkup saya, itu membuat markup cukup bersih, dan itu cepat dan mudah diimplementasikan. Kecuali, jika demikian, Anda akan melakukan hal yang persis sama berulang kali, dalam hal ini saya akan pergi dengan saran Bertrand dan membuat filter atau mungkin arahan, tergantung pada situasinya.

Seperti biasa, hal terpenting adalah solusi Anda mudah dipelihara , dan mudah-mudahan dapat diuji. Dan itu akan bergantung sepenuhnya pada situasi spesifik Anda.

Saya menggunakan yang berikut ini untuk menetapkan attr kelas secara kondisional ketika ng-class tidak dapat digunakan (misalnya saat menata SVG):

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

Pendekatan yang sama harus bekerja untuk tipe atribut lainnya.

(Saya pikir Anda harus menggunakan Angular terbaru yang tidak stabil untuk menggunakan ng-attr-, saya saat ini di 1.1.4)

Saya telah menerbitkan artikel tentang bekerja dengan AngularJS + SVG yang membahas tentang ini dan masalah terkait. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Untuk memeriksa konten variabel dan memiliki teks default, Anda dapat menggunakan:

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

Jika saya mengerti Anda dengan baik, saya pikir Anda memiliki dua cara untuk melakukannya.

Pertama, Anda bisa mencoba ngSwitch dan cara kedua yang mungkin adalah membuat filter Anda sendiri . Mungkin ngSwitch adalah pendekatan yang tepat tetapi jika Anda ingin menyembunyikan atau menampilkan konten sebaris hanya menggunakan filter {{}} adalah cara yang harus dilakukan.

Berikut ini biola dengan filter sederhana sebagai contoh.

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

Pustaka UI sudut memiliki built-in directive ui-if untuk kondisi dalam templat / Tampilan hingga angular ui 1.1.4

Contoh: Dukungan di UI Sudut hingga 1.1.1

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

ng-jika tersedia di semua versi sudut setelah 1.1.4

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

jika Anda memiliki data dalam variabel array maka hanya div yang akan muncul

Jadi dengan Angular 1.5.1 (memiliki ketergantungan aplikasi yang ada pada beberapa dependensi tumpukan MEAN lain adalah mengapa saya saat ini tidak menggunakan 1.6.4)

Ini bekerja untuk saya seperti kata OP {{myVar === "two" ? "it's true" : "it's false"}}

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

jika Anda ingin menampilkan "Tidak Ada" ketika nilainya "0", Anda dapat menggunakan sebagai:

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

atau benar salah di sudut js

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

Bekerja bahkan dalam Situasi yang eksotis:

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

Saya akan melemparkan milik saya dalam campuran:

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

ini mengevaluasi pernyataan if sekali dan menambahkan no watch listener TETAPI Anda dapat menambahkan atribut tambahan ke elemen yang memiliki set-if disebut wait-for = "somedata.prop" dan itu akan menunggu data atau properti diatur sebelum mengevaluasi pernyataan if sekali. atribut tambahan itu bisa sangat berguna jika Anda sedang menunggu data dari permintaan 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');
              });
            }
          }
        };
      }
    };
  });