Structure of my app is like following:
<div class="parent">
<div class="child" ng-if="showChild">
<div class="child-view-1" ng-if="!isShown">
</div>
<div class="child-view-2" ng-if="isShown">
</div>
</div>
</div>
Inside child-view-2 I have form element, and of course, it is undefined in controller, probably beacuse of ng-if (as it creates child scope).
isShown variable just switches divs from child-view-1 to child-view-2.
What do you suggest, how can I make form visible all time in controller?
EDIT: My fault, the outer child is controlled by showChild flag...
You have an outer ng-if (on div class="child") based on the value of isShown. When isShown is true the content will be added to the DOM, and the class="child-view-1" will obviously not be added to the DOM because of ng-if="!isShown"
The second div's ng-if is redundant because it is the same condition as the outer one:
<div class="parent">
<div class="child" ng-if="isShown">
<div class="child-view-1" ng-if="!isShown">
<!-- THIS WILL NEVER BE DISPLAYED -->
</div>
<div class="child-view-2" ng-if="isShown">
<!-- THIS WILL ALWAYS BE DISPLAYED WHEN isShown IS TRUE -->
</div>
</div>
</div>
Related
Following code snippet does not work
Please suggest any other way of doing it
<html>
`<div id="tablediv" ng-model="ngtable">
<div ng-show="ngtable">
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>`
</div>
</div>
</html>
Yes you can, Both are different.
ng-show
sets the display:none of the element when expression evaluates to false while ng-if removes the element from the DOM when the expression evaluates to false
Check out this question to know the differences between ng-show and ng-if & where and How to use them:
When to favor ng-if vs. ng-show/ng-hide?
In your html code , you are using something wrong, because you are using ng-model for a div .
<html>
<div id="tablediv" ng-model="ngtable">
<div ng-show="ngtable">
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>
</div>
</div>
</html>
ng-model is used to bind the value of any inputbox/textarea/select like tags, you can not bind any value like this:
<div id="tablediv" ng-model="ngtable">
if you remove this ng-model then your code would be like this:
<html>
<div id="tablediv">
<div ng-show="ngtable">
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>
</div>
</div>
</html>
Now, if ngtable have some value it means ng-show=true then
<div ng-show=true>
// all the elements are visible on the DOM.
</div>
but , if if ngtable do not have any value it means ng-show=false then :
<div ng-show=false>
// all the elements are not visible on the DOM.
</div>
And inside this code:
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>
if ng-if="currentdevicetype == 'condition1'" returns true then all the elements would be create, otherwise element will not be created.
<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
<div class="individual_sunti" ng-click="update_ancestor(sunti)">
<!--needs a unique div#id via angularz-->
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
</div>
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
</div>
</div>
I want to only show the div.sunti_reply_carriage if there are any descendents rendered in the ng-repeat. If there are no descendents, I don't want the div sunti_reply_carriage to appear at all. However, the ng-show="!sunti.descendents.length" does not work, presumably because it's just outside/before the ng-repeat that references descendents in sunti.descendents
How can I do this?
ng-show="!sunti.descendents.length"
Above code does not show the following code block if length is greater than zero
Ex: If sunti.descendents.length is 1 then
!1 is false then ng-show="false"
If sunti.descendents.length is 0 then !0 is true then ng-show="true"
So, change the expression to ng-show="sunti.descendents.length"
You can use ng-if as well if you want to completely remove the code block from DOM if the expression evaluates to false.
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
You can use sunti.descendents.length instead of !sunti.descendents.length
If length property returns 0 then it will be hidden because it is falsey value in JavaScript, if it will return some value i.e. a number then it will be shown because it is truthy value in JavaScript.
If you want to show or hide you can use ng-show or ng-hide directives, if you want to completely remove/insert the DOM conditionally then you can use the ng-if directive in this case.
Using the ng-show directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
Using the ng-if directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-if="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
I have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I'm seeing some odd behaviour when I put custom directives inside a div with an ng-show.
If I define the html as:
<div ng-show="service.searchResults">
<fig-search-type-filters />
<fig-filter-search />
<div class="gridStyle" ng-grid="vm.grid"></div>
</div>
then when the show condition is true it shows just fig-search-type-filters content. All the rest is elided from the html.
However, if I wrap each directive as follows:
<div ng-show="service.searchResults">
<fig-search-type-filters />
</div>
<div ng-show="service.searchResults">
<fig-filter-search />
</div>
<div ng-show="service.searchResults">
<div class="gridStyle" ng-grid="vm.grid"></div>
</div>
then fig-search-type-filters, fig-filter-search and the grid are displayed as I expect. Why is this?
If I move the ng-show condition inside the template for each directives then again only the fig-search-type-filters appears.
What if you do this:
<div ng-show="service.searchResults">
<fig-search-type-filters> </fig-search-type-filters>
<fig-filter-search> </fig-filter-search>
<div class="gridStyle" ng-grid="vm.grid"></div>
</div
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>