193

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

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

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

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

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

ただし、オブジェクトのパラメータを式として使用する場合、ng-hideおよびng-showには正しいtrue/false値が与えられますが、値はブール値として扱われないため、常に次の値を返し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をよりよく理解している人が私を助けてくれることを望んでいましたか？

4

7 に答える 7

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ディレクティブはそうではありません。

Angular テンプレートについて も参照してください。

于 2012-09-26T13:08:33.850 に答える
18

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

$scope.$apply(function() {
   $scope.foo.bar=true;
})
于 2012-10-22T07:25:53.053 に答える
7

ng-showは角度属性だと思うので、評価の花括弧 ( )を付ける必要はありません{{}}。

のような属性についてclassは、変数を評価の花かっこ ( {{}}) でカプセル化する必要があります。

于 2013-02-13T04:14:52.680 に答える
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>
于 2014-10-15T07:12:00.427 に答える
0

angular 式は angular ディレクティブで使用できないため、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>
于 2016-10-13T20:33:59.053 に答える
-1

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

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

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

于 2016-09-20T15:19:32.550 に答える