Clever Geek Handbook

Prevent ng-show effect for baby

Is it possible to prevent the effect ng-show

for a specific child element.

Let's say I have the following html.

<div ng-show="showParent" class="parent">
   <div class="childOne"></div>        <!-- don't hide this -->
   <div class="childTwo"></div>
</div>

Now what I would like to achieve is hiding everything except childOne

. Really hide a parent, but one or more of his children?

+3


source to share


3 answers


No, you cannot. The HTML standard prevents this. All children are hiding when parent is hiding and AngularJS just adds stuff to HTML, it doesn't change it.



However, AngularJS allows one variable to control multiple elements and will probably help us get the same affects you want. So let's get back to what you are really trying to achieve. To do this, we'll need the additional information that you brought up in this question to reduce the issue (and thanks for that). What about hiding childTwo doesn't work for you? Are there other things about the parents that you need to hide? We can put them in separate elements (div or span or whatever) and hide those with the same variable that we hide ChildTwo. Does the parent have some formatting (say a border or something) that you need to hide? We can change which classes are on the parent based on the same variable we are using.to hide other elements to something that removes the border and any other style, effectively making it invisible while still technically present in the DOM.

+3


source


ngShow

relies on the CSS ( .ng-hide

) class . You can override this class with your own more specific selector only for the sections you want to exclude from the directive.

<div class="parent" ng-show="showParent">
  <div class="childOne nghide-override"></div>
  <div class="childTwo"></div>
</div>

Source: https://docs.angularjs.org/api/ng/directive/ngShow



(I can't test this right now, but I'll mock something and edit / delete if it doesn't work.)

You can also just split the children into a div and hide the second div:

<div class="parent">
  <div class="shown children">
    <div class="childOne"></div>
  </div>
  <div class="hidden children" ng-show="showParent">
    <div class="childTwo"></div>
  </div>
</div>
0


source


Use jQuery unwrapping. Include jquery in your application:

bower install jquery --save

Set a prefab to the specified div:

<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
-1


source






More articles:


All Articles