- 首页
- 其他开发
- ng-show=“真"但仍然有 class="ng-hide"
ng-show=“真"但仍然有 class="ng-hide"
[英] ng-show="true" but still has class="ng-hide"
本文介绍了ng-show=“真"但仍然有 class="ng-hide"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 AngularJS 的新手，所以我的问题可能有一个简单的解决方案.我一直在研究这个表格.我有两个输入——一个是门的数量，一个是窗户的数量.然后我有几个 div，我想展示它们是否满足一定数量的门窗总数.当我在输入中输入数字时，ng-show 解析为true".但是该元素仍然具有ng-hide"类，这仍然将其隐藏.
这是我的代码示例:
门:<input type="number" ng-model="doors"><br>Windows:<input type="number" ng-model="windows"><br><div ng-show="{{(门 + 窗) < 6}}">显示您是否有 0-5 个门窗组合.
<div ng-show="{{(门+窗)>5&&(门+窗)<11}}">显示您是否有 6-10 个门窗组合.
<div ng-show="{{(门 + 窗) > 10 }}">显示您是否有 10 个以上的门窗组合.
这是我输入 3 门 4 窗时的输出:
显示您是否有 0-5 个门窗组合.
<div ng-show="true" class="ng-hide">显示您是否有 6-10 个门窗组合.
<div ng-show="false" class="ng-hide">显示您是否有 10 个以上的门窗组合.
解决方案
ngShow 采用 Angular 表达式，因此您不需要双花括号.
这对你有用:
显示您是否有 0-5 个门窗组合.
<div ng-show="(门+窗)>5&&(门+窗)<11">显示您是否有 6-10 个门窗组合.
<div ng-show="(门+窗)> 10">显示您是否有 10 个以上的门窗组合.
演示小提琴
要理解为什么让我们看看ngShow源代码:
var ngShowDirective = ['$animate', function($animate) {返回函数(范围，元素，属性){scope.$watch(attr.ngShow, 函数 ngShowWatchAction(value){$animate[toBoolean(value) ?'removeClass' : 'addClass'](element, 'ng-hide');});};}];
关键是它在attr.ngShow上放了一个手表.当您将该属性设置为 {{(doors + windows) <6}} 发生的第一件事是计算双花括号中的表达式.在您的情况下，门和窗以 undefined 开头，因此表达式的计算结果为 false.然后将 false 传入属性.所以一个 $watch 被放置在 false 上并且每个 $digest 循环 false 被检查，并且 false 一直是 false 所以 watch 函数永远不会运行.
需要注意的重要一点是属性本身没有被监视，而是最初传入的值被监视.因此，即使您稍后将属性更改为true"，并在 html 中看到该更改，手表也从未注意到这一点.
相反，当我们传入 (doors + windows) <6 as attr.ngShow 然后在每个 $digest 上 $watch 评估该表达式.每当表达式的结果发生变化时，就会调用 watch 函数并设置相应的类.
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>
demo fiddle
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-show=“真"但仍然有 class="ng-hide"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
