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

我是新来的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>

ngShow采用一个角度表达式，所以你不想要双大括号。

这将为您工作：

<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}}发生的第一件事是评价双花括号中的表达式。在你的情况下，门和窗口开始未定义，所以表达式的结果为false。然后false被传递给属性。因此，$ watch被置于false，并且每个$ digest周期为false被检查，并且false保持为false，因此watch函数从不运行。重要的是要注意的是，属性本身没有被监视，但是最初传递的值被监视。因此，即使您稍后将属性更改为“true”，并看到html中的更改，这是从来没有注意到手表。相反，当我们进入(门窗) 6 as attr.ngShow然后在每个$ digest $ watch评估那个表达式。每当表达式的结果改变时，watch函数被调用并且适当的类集合。

原文地址：https://www.jb51.cc/angularjs/146182.html

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

相关推荐