NG-秀= QUOT;真＆QUOT;但仍然有类= QUOT; NG-隐藏] [英] ng-show="true" but still has class="ng-hide"
问题描述
我是新来AngularJS，所以有可能是一个简单的解决我的问题。我一直这个形式。我有两个输入 - 一个是门的数量和一个用于窗口的数量。然后，我有我想显示他们是否达到一定的数量总门窗几个div的。当我输入数字到输入，NG-节目解析为真。但仍然元素有它的类NG隐藏的其中仍有它隐藏起来。
下面是我的code的样本：
＆LT;机身NG-应用＆GT;
门：＆LT;输入类型=数字NG-模式=门＆GT;＆LT; BR＆GT;
窗户：LT;输入类型=数字NG-模式=窗口＆GT;＆LT; BR＆GT;＆LT; DIV NG秀={{（门+视窗）6;}}＆GT;
如果你有0-5门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG秀={{（门+视窗）＆GT; 5安培;及（门+视窗）＆LT; 11}}＆GT;
如果你有6-10门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG秀={{（门+视窗）大于10}＆GT;
可见，如果你有10个以上的门窗组合。
＆LT; / DIV＆GT;
＆LT; /身体GT;
下面是输出的，当我进入3门和4个窗口：
＆LT; DIV NG秀=假级=NG隐藏＆GT;
如果你有0-5门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG秀=真正的类=NG隐藏＆GT;
如果你有6-10门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG秀=假级=NG隐藏＆GT;
可见，如果你有10个以上的门窗组合。
＆LT; / DIV＆GT;
ngShow 需要一个角前pression所以你不想要的双重大括号内。
这会为你工作：
＆LT; DIV NG-秀=（门+视窗）6;＆GT;
如果你有0-5门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG-秀=（门+视窗）＆GT; 5安培;及（门+视窗）＆LT; 11＆GT;
如果你有6-10门窗组合显示。
＆LT; / DIV＆GT;
＆LT; DIV NG-秀=（门+视窗）大于10＆GT;
可见，如果你有10个以上的门窗组合。
＆LT; / DIV＆GT;
要理解为什么让我们来看看在<一个href=\"https://github.com/angular/angular.js/blob/aba0fe683040f753f60a0f8030777d94aa9f58bf/src/ng/directive/ngShowHide.js\"><$c$c>ngShow来源$ C $ C ：
VAR ngShowDirective = ['$动画'，函数（$动画）{
返回功能（范围，元素，属性）{
范围。$腕表（attr.ngShow，功能ngShowWatchAction（值）{
$动画[toBoolean（价值）？ removeClass移除'：'addClass']（元素，'NG隐藏'）;
}）;
};
}];
最关键的是，它使得腕表在 attr.ngShow 。当您在属性设置为 {{（门+视窗）＆LT; 6}} 中发生的第一件事情就是在双大括号中前pression进行评估。在你的情况，门窗开出未定义所以前pression计算结果为假。然后假中的属性通过。因此，一个 $观看放在假和每 $消化周期假被选中，而假一直是假所以手表的功能从未运行。
要注意的重要一点是，该属性本身不被关注，但最初传入的值被观看。因此，即使您以后更改属性为true，并查看HTML的变化，这是从来没有手表注意。
当，相反，我们通过在（门+视窗）＆LT; 6 为 attr.ngShow 然后在每个 $消化的 $看评估的前pression。而且，只要前任pression的结果改变了手表函数被调用及相应的类集。
I'm new to AngularJS, so there may be a simple resolution to my problem. I've been working on this form. I have two inputs - one is for the number of doors and one is for the number of windows. I then have several divs that I want to show if they meet a certain number of total doors and windows. When I enter numbers into the input, the ng-show resolves to "true". But the element still has the class of "ng-hide" on it which still leaves it hidden.
Here's a sample of my code:
<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>
Here's the output when I enter 3 doors and 4 windows:
<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 takes an Angular expression so you don't want the double curly braces.
This will work for you:
<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>
To understand why let's look at the 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');
});
};
}];
The key is that it puts a watch on attr.ngShow. When you set that attribute to {{(doors + windows) < 6}} the first thing that happens is the expression in the double curly braces is evaluated. In your case, doors and windows start out undefined so the expression evaluates to false. Then false is passed in to the attribute. So a $watch is placed on false and every $digest cycle false is checked, and false keeps being false so the watch function never runs.
The important thing to note is that the attribute itself isn't being watched, but the value that was initially passed in is watched. So even though you later change the attribute to "true", and see that change in the html, that's never noticed by the watch.
When, instead, we pass in (doors + windows) < 6 as attr.ngShow then on each $digest the $watch evaluates that expression. And whenever the result of the expression changes the watch function is called and the appropriate class set.
这篇关于NG-秀= QUOT;真＆QUOT;但仍然有类= QUOT; NG-隐藏]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
