Açısal JS: ng-show / ng-hide `{{}}` enterpolasyonu ile çalışmıyor

193

AngularJS tarafından sağlanan ng-showve ng-hideişlevlerini kullanarak bazı HTML göstermek / gizlemek çalışıyorum .

Belgelere göre, bu işlevlerin ilgili kullanımı aşağıdaki gibidir:

ngHide - {expression} - İfade doğruysa, öğe sırasıyla gösterilir veya gizlenir. ngShow - {expression} - İfade doğruysa, öğe sırasıyla gösterilir veya gizlenir.

Bu, aşağıdaki kullanım için çalışır:

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

Ancak, ifade olarak bir nesneden bir parametre kullanmamız gerekir ng-hideve sonra ng-showdoğru true/ falsedeğer verilir, ancak değerler bir boole olarak değerlendirilmez, bu nedenle her zaman döndürür false:

Kaynak

<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>

Sonuç

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

Bu bir hata ya da bunu doğru yapmıyorum.

AngularJS hakkında daha iyi bir anlayışa sahip olan herkesin bana yardımcı olabileceğini umduğumdan, nesne parametrelerini ifade olarak görmeye ilişkin göreceli bilgi bulamıyorum?

angularjs ng-show ng-hide

— Başım ağrıyor
kaynak

375

foo.barReferans parantez içermemelidir:

<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>

Açısal ifadelerin , köşeli ayraç bağlamaları içinde olması gerekir; burada Açısal yönergeler yoktur.

Ayrıca bkz . Açısal Şablonları Anlama .

— Başım ağrıyor
kaynak

76

"Açısal ifadelerin, köşeli ayraç bağlamaları içinde olması gerekir; burada Açısal yönergeler yoktur." Oradaki hat. Keşke bunu iki kez değerlendirebilseydim.

— MushinNoShin

3

Eğer dosyalanmış bir değer olup olmadığını kontrol etmek istiyorsanız:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

1

Teşekkürler, bu çok sezgisel değildi (tüm oylamalardan anlayabileceğiniz gibi)

— Sentient

1

Ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) belgeleri , bağımsız değişkeni özellikle bir ifade olarak adlandırır; bu da kıvırcık parantez gerektirdiği anlamına gelir. Burada ne eksik?

— Ed Norris

1

Bu cevap aslında doğru değil. Kıvırcık ayraçlar ifadenin yürütülmesi ve sonucunun DOM içine eklenmesi gerektiğini belirtirken, yönerge öznitelik değerini mantığına bağlı olarak bir ifade olarak ele alabilir veya işlemeyebilir. Bazı direktifler (ngHref) bile küme ayracı bağlarını destekler.

— Vasaka

31

{{}}Köşeli direktifler ile bağlama için kullanamazsınız , ng-modelancak açısal olmayan nitelikleri bağlamak için{{}} .

Örneğin:

ng-show="my-model"
title = "{{my-model}}"

— SHIVANG SANGHI
kaynak

18

İfadeyi şununla kaydırmayı deneyin:

$scope.$apply(function() {
   $scope.foo.bar=true;
})

— hrn
kaynak

7

foo.bar = trueolmalıdır scope.foo.bar = true, değerini değiştirmek içinfoo.bar

— Rajkamal Subramanian

1

Bazen kapsam güncellemelerimi $ scope ile kapatarak bazen gösterilebileceği ve bazen göstermeyeceği garip bir sorun yaşadım. $ Uygulamak (function () {}); benim için çalıştı :)

— nevernew

Açısal için yeniyim ve her değişken belirlemem gerektiğinde bunu yapmamayı tercih ederim. Birisi bunun neden bazen gerekli olduğunu açıklayabilir mi?

— Davis

Bir yararlı blog yazısı beni bu cevap yardımcı oldu. Herhangi bir Ajax veya özel dinleyicinin güncellenmesi sorunları olacak ve a$scope.$apply

— davis

7

Yana ng-showbence bir açısal niteliktir, biz (değerlendirme çiçek parantez koymak gerekmez {{}}) ..

Gibi özellikler classiçin değişkenleri değerlendirme çiçek parantezleri ( {{}}) ile kapsüllememiz gerekir .

— Rajkamal Subramanian
kaynak

kapat - içine baktım ve açısal ifadelerin açısal direktiflerin olmadığı kıvrımlı parantez içinde olması gerekiyor gibi görünüyor

— Kafam acıyor

7

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
    function controller($scope) {
        $scope.data = {
            show: true,
            hide: false
        };
    }
</script>

<div ng-controller="controller">
    <div ng-show="data.show"> If true the show otherwise hide. </div>
    <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>

— Anil Singh
kaynak

0

açısal ifadeler açısal direktiflerde kullanılamadığından foo.bar çevresindeki {{}} parantezleri kaldırın.

Daha fazlası için: https://docs.angularjs.org/api/ng/directive/ngShow

misal

  <body ng-app="changeExample">
    <div ng-controller="ExampleController">
    <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
    <p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
    </div>
    </body>

<script>
     angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.foo ={};
          $scope.foo.bar = true;
        }]);
</script>

— Vijay Kumar Reddy
kaynak

-1

Bir {{expression}} durumunun durumuna göre bir öğeyi göstermek / gizlemek istiyorsanız şunları kullanabilirsiniz ng-switch:

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

Paragraf foo.bar doğru olduğunda, yanlış olduğunda gizlenir.

— Roberto
kaynak