Question

我是AngularJS的新手，因此我的问题可能会有一个简单的解决方案。我一直在研究这个表格。我有两个输入 - 一个用于门的数量，一个用于窗口的数量。然后，如果他们满足一定数量的门窗，我想要展示几个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>

Answer 1

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>

demo fiddle

要理解为什么让我们看看ngShow source code：

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传递给属性。因此，$watch放置在false上，每$digest个周期false都会被选中，false保持false，因此监视功能永远不会运行。

需要注意的重要一点是，属性本身并未被监视，但是最初传入的值是被监视的。因此，即使您稍后将属性更改为＆＃34; true＆＃34;，并在html中看到该更改，但手表从未注意到这一点。

相反，我们将(doors + windows) < 6作为attr.ngShow传递，然后在每个$digest上$watch评估该表达式。每当表达式的结果发生变化时，都会调用watch函数并设置相应的类。

ng-show =“true”但仍有class =“ng-hide”

1 个答案: