我是新来的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>
要了解为什么让我们来看看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函数被调用并且适当的类集合。
