AngularJS：ng-show / ng-hideが `{{}}`補間で機能しない

193

AngularJSが提供するng-showおよびng-hide関数を使用して、一部のHTMLを表示/非表示にしようとしています。

ドキュメントによると、これらの関数のそれぞれの使用法は次のとおりです。

ngHide – {expression}-式が真である場合、要素はそれぞれ表示または非表示になります。ngShow – {expression}-式が真である場合、要素はそれぞれ表示または非表示になります。

これは、次のユースケースで機能します。

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

ただし、オブジェクトのパラメーターを式として使用するng-hideと、とにng-showは正しいtrue/ false値が与えられますが、値はブール値として扱われないため、常にreturnを返しfalseます。

ソース

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

結果

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

これはバグであるか、正しく実行していません。

式としてオブジェクトパラメータを参照することに関する相対的な情報が見つからないので、AngularJSをよく理解している人が手助けしてくれることを望んでいましたか？

angularjs ng-show ng-hide

— 頭が痛い
ソース

375

foo.barリファレンスは、中括弧を含めることはできません。

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

Angular ディレクティブはそうではないように、角式は中括弧バインディング内にある必要があります。

Angularテンプレートの理解も参照してください。

— 頭が痛い
ソース

76

「Angularディレクティブはそうではないように、角式は中括弧バインディング内にある必要があります。」その行はすぐそこです。私はこれを2回賛成できるといいのですが。

— MushinNoShin 2013年

3

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

— フィールドに

1

おかげで、これはあまり直感的ではありませんでした（すべての賛成投票からわかるように）

— Sentient

1

ng-hideのドキュメント（docs.angularjs.org/api/ng/directive/ngHide）では、特に引数を式と呼んでいます。つまり、中括弧が必要です。ここで何が欠けていますか？

— Ed Norris

1

この答えは実際には正しくありません。中括弧は、式を実行し、その結果をDOMに挿入する必要があることを示します。一方、ディレクティブは、その論理に応じて属性値を式として扱う場合と扱わない場合があります。一部のディレクティブ（ngHref）は中括弧バインディングもサポートしています。

— Vasaka 2014

31

{{}}とのバインドに角度ディレクティブを使用する場合は使用できませんng-modelが、非角度属性のバインドには{{}}.. を使用する必要があります。

例えば：

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

— SHIVANG SANGHI
ソース

18

式を次のようにラップしてみてください：

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

— hrn
ソース

7

foo.bar = trueでなければならないscope.foo.bar = trueの値を変更するために、foo.bar

— Rajkamalスブラマニアン

1

スコープの更新を$ scope。$ apply（function（）{}）;でラップして、表示される場合と表示されない場合がある奇妙な問題がありました。私のために働いた:)

— nevernew '09 / 09/20

私はangularに慣れていないので、変数を設定する必要があるたびにこれを実行することはあまりありません。なぜこれが必要なのかを誰かが説明できますか？

— デイビス、2015年

役立つブログ記事は、私がこれを答える助けました。Ajaxリスナーまたはカスタムリスナーは更新に問題があり、aが必要であることが判明$scope.$apply

— davis

7

ng-showは角度属性なので、評価の花の括弧（{{}}）を付ける必要はありません。

class評価フラワーブラケット（{{}}）で変数をカプセル化する必要があるような属性の場合。

— ライカマルスブラマニアン
ソース

閉じる-調べてみましたが、角度表現は角括弧が角括弧の中にない括弧内にある必要があるようです

— 頭が痛い

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>

— アニル・シン
ソース

0

角度式は角度ディレクティブでは使用できないため、foo.barの周りの{{}}括弧を削除します。

詳細：https : //docs.angularjs.org/api/ng/directive/ngShow

例

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

— ビジェイ・クマー・レディ
ソース

-1

1つの{{expression}}のステータスに基づいて要素を表示/非表示にする場合は、次のように使用できますng-switch：

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

段落は、foo.barがtrueの場合に表示され、falseの場合は非表示になります。

— ロベルト
ソース