web-dev-qa-db-ja.com

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

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

資料によると、これらの機能のそれぞれの使用法は次のとおりです。

ngHide - {式} - 式が真の場合、要素はそれぞれ表示または非表示になります。 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をよりよく理解している人が助けになることを願っていますか？

angularjsng-showng-hide
194
My Head Hurts

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テンプレートの理解 もご覧ください。

374
My Head Hurts

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

例えば：

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

式をラップしてみてください。

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

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

classのような属性については、評価用の括弧（{{}}）で変数をカプセル化する必要があります。

7
Rajkamal Subramanian
<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>
7
Anil Singh

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>
0
Vijay Kumar Reddy