Menu
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> 
874
First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design. You can use a function, another field or just some more inline-logic.
ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives. ng-hide can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.
Overriding . By default, the . ng-hide class will style the element with display: none ! important . If you wish to change the hide behavior with ngShow / ngHide , you can simply overwrite the styles for the .
ngIf makes a manipulation on the DOM by removing or recreating the element. Whereas ngShow applies a css rules to hide/show things.
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.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With