AngularJS: ng-show / ng-hide tidak bekerja dengan interpolasi `{{}}`

193

Saya mencoba untuk menampilkan / menyembunyikan beberapa HTML menggunakan ng-showdan ng-hidefungsi - fungsi yang disediakan oleh AngularJS .

Menurut dokumentasi, penggunaan masing-masing untuk fungsi-fungsi ini adalah sebagai berikut:

ngHide - {ekspresi} - Jika ekspresi benar maka elemen ditampilkan atau disembunyikan masing-masing. ngShow - {ekspresi} - Jika ekspresi benar maka elemen ditampilkan atau disembunyikan masing-masing.

Ini berfungsi untuk usecase berikut:

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

Namun, jika kita menggunakan parameter dari objek sebagai ekspresi maka ng-hidedan ng-showdiberikan nilai true/ benar falsetetapi nilai tidak diperlakukan sebagai boolean jadi selalu kembali false:

Sumber

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

Hasil

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

Ini bug atau saya tidak melakukan ini dengan benar.

Saya tidak dapat menemukan informasi relatif tentang referensi parameter objek sebagai ekspresi jadi saya berharap siapa pun yang memiliki pemahaman yang lebih baik tentang AngularJS mungkin dapat membantu saya?

angularjs ng-show ng-hide Kepala saya sakit
sumber

Jawaban:

375

The foo.barreferensi harus tidak mengandung kawat gigi:

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

Ekspresi sudut harus dalam ikatan kurung kurawal, sedangkan arahan tidak.

Lihat juga Memahami Templat Sudut .

Kepala saya sakit
sumber
76
"Ekspresi sudut harus berada dalam ikatan kurung kurawal, sedangkan arahan Angular tidak." Garis itu di sana. Saya berharap saya bisa membenarkan ini dua kali.
MushinNoShin
3
Jika Anda ingin memeriksa apakah yang diajukan memiliki nilai pakai:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
czerasz
1
Terima kasih, ini tidak terlalu intuitif (seperti yang dapat Anda katakan dari semua suara-up)
Sentient
1
Dokumentasi untuk ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) secara khusus menyebut argumen sebagai ekspresi, yang berarti ia membutuhkan kurung kurawal. Apa yang kulewatkan di sini?
Ed Norris
1
Jawaban ini sebenarnya tidak benar. Kurung kurawal menunjukkan bahwa ekspresi harus dieksekusi dan hasilnya harus dimasukkan ke DOM, sementara direktif mungkin atau mungkin tidak memperlakukan nilai atribut sebagai ekspresi tergantung pada logikanya. Beberapa arahan (ngHref) bahkan mendukung binding penjepit keriting.
Vasaka
31

Anda tidak dapat menggunakan {{}}ketika menggunakan arahan sudut untuk mengikat dengan ng-modeltetapi untuk mengikat atribut non-sudut Anda harus menggunakan {{}}..

Misalnya: 

ng-show="my-model"
title = "{{my-model}}"
SHIVANG SANGHI
sumber
18

Coba balas ekspresi dengan: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
jam
sumber
7
yang foo.bar = trueharus scope.foo.bar = true, untuk mengubah nilaifoo.bar
Rajkamal Subramanian
1
Saya punya masalah aneh di mana kadang-kadang akan ditampilkan dan kadang-kadang tidak, membungkus pembaruan lingkup saya di $ scope. $ Apply (function () {}); bekerja untuk saya :)
nevernew
Saya baru untuk sudut dan saya lebih suka tidak melakukan ini setiap kali saya perlu mengatur variabel. Adakah yang bisa menjelaskan mengapa ini kadang dibutuhkan?
davis
Sebuah posting blog membantu membantu saya menjawab ini. Ternyata Ajax atau pendengar khusus akan mengalami masalah memperbarui dan memerlukan$scope.$apply
davis
7

Karena ng-showmerupakan atribut sudut yang saya pikir, kita tidak perlu menempatkan kurung evaluasi bunga ( {{}}) ..

Untuk atribut seperti classkita perlu merangkum variabel dengan tanda kurung bunga evaluasi ( {{}}).

Rajkamal Subramanian
sumber
close - Saya melihat ke dalamnya dan sepertinya ekspresi sudut harus berada dalam kurung keriting di mana arahan sudut tidak
My Head Hurts
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
sumber
0

hapus {{}} tanda kurung di sekitar foo.bar karena ekspresi sudut tidak dapat digunakan dalam arahan sudut.

Untuk Lebih Lanjut: https://docs.angularjs.org/api/ng/directive/ngShow

contoh

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

Jika Anda ingin menampilkan / menyembunyikan elemen berdasarkan status {{ekspresi}} Anda dapat menggunakan ng-switch:

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

Paragraf akan ditampilkan ketika foo.bar benar, disembunyikan saat salah.

Roberto
sumber