web-dev-qa-db-ja.com

ng-show = "true"ですが、まだclass = "ng-hide"があります

私はAngularJSが初めてなので、私の問題を簡単に解決できるかもしれません。私はこのフォームに取り組んでいます。入力は2つあります。1つはドアの数用で、もう1つは窓の数用です。次に、特定の数の合計のドアと窓を満たしているかどうかを表示したいいくつかのdivがあります。入力に数値を入力すると、ng-showは「true」に解決されます。しかし、要素にはまだ「ng-hide」のクラスがあり、非表示のままです。

これが私のコードのサンプルです：

<body ng-app>
Doors: <input type="number" ng-model="doors"><br>
Windows: <input type="number" ng-model="windows"><br>

<div ng-show="{{(doors + windows) < 6}}">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 5 && (doors + windows) < 11}}">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 10 }}">
  Shows if you have more than 10 doors and windows combined.
</div>
</body>

3つのドアと4つの窓を入力したときの出力は次のとおりです。

<div ng-show="false" class="ng-hide">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="true" class="ng-hide">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="false" class="ng-hide">
  Shows if you have more than 10 doors and windows combined.
</div>
formsangularjsng-show
46
Josh

ngShow はAngular式を使用するため、二重中括弧は必要ありません。

これはあなたのために働くでしょう：

_<div ng-show="(doors + windows) < 6">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 5 && (doors + windows) < 11">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 10">
  Shows if you have more than 10 doors and windows combined.
</div>
_

デモフィドル

なぜ ngShowソースコード を見てみましょう：

_var ngShowDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngShow, function ngShowWatchAction(value){
      $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
    });
  };
}];
_

重要なのは、_attr.ngShow_を監視することです。その属性を{{(doors + windows) < 6}}に設定すると、最初に発生するのは二重中括弧内の式が評価されることです。あなたの場合、ドアと窓はundefinedで始まるため、式はfalseに評価されます。次に、falseが属性に渡されます。そのため、falseに_$watch_が配置され、すべての_$digest_サイクルfalseがチェックされ、falseはfalseのままです。ウォッチ機能は実行されません。

重要なことは、属性自体は監視されていないが、最初に渡された値が監視されることです。したがって、後で属性を「true」に変更し、htmlでその変更を確認しても、それはウォッチによって認識されません。

代わりに、_(doors + windows) < 6_を_attr.ngShow_として渡すと、各_$digest_で_$watch_がその式を評価します。そして、式の結果が変わるたびに、監視関数が呼び出され、適切なクラスが設定されます。

88
KayakDave