I have a conditional print requirement in Angular and Bootstrap environment. The requirement is to print a div when the condition exists.
On the HTML code:
<div class="print" ng-show="objects[0].exists">
///My print Part
</div>
On the LESS code:
>.print{
.visible-print-block;
}
What's happening in my case is .visible-print-block is overriding the Angular condition and printing the div irrespectively of the condition.
You want to use the ng-class directive
So your coude would look like:
<div ng-class= '{"print": objects[0].exists}'>
///My print Part
</div>
Using this solution the class 'print' will only be applied if the result of objects[0].exists is true.
Related
<div class="emptyMessage" ng-show="{{ToBuy.Items.length}}==0" > Everything is bought! {{ToBuy.Items.length}} </div>
I wanted the above Div tag to not show when my ToBuy.Items array has some elements in it. The Div tag should appear only when there are no Items in ToBuy.Items array has no elements.
When I removed all elements from the array (Tobuy.Items), the expression simply shows ng-show="0==0" and the Div Tag doesn't show up on the web page.
Any help greatly appreciated.
ngShow expects an expression, so you do not want to put curly braces in it. Try the following:
ng-show='ToBuy.Items.length == 0'
I'd recommend making this expression a property on your controller instead of checking ToBuy.Items.length == 0. Business logic belongs in the controller, not in the view.
Remove the expression inside the ng-show,
<div ng-controller="MyCtrl">
<div ng-show="ToBuy.Items==0"> Everything is bought! {{ToBuy.Items.length}} </div>
</div>
DEMO
Try to use ng-hide
ng-hide='ToBuy.Items.length'
or
ng-hide='ToBuy.Items'
both should work i think.
I am in an ng-repeat. How do I conditionally add some html in the loop. So far, I have the following code:
<div ng-show="showCondition">
<div>
...
<input name="bla[{{obj.value}}].Id type="Text" />
</div>
</div>
That certainly hides the html. But I still end up with inputs sending stuff to the server for iterations where I don't want the input to even exist.
I can't use ng-include, because the html is in the same file, in the loop.
How can I just say, "if true, render the following html during this iteration of the loop"?
Thanks
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
So in your case as you are using the ng-show its just hiding the element not removing it from DOM. Just replace ng-show/hide with ng-if
I used to work with backbone and handlebars and was able to do things like
{{ if condition }}
<div class="container">
{{ endif }}
more html
{{ if condition }}
</div>
{{ endif}}
I know I can use ng-if but I want to display conditionally an element opening and closing not the whole element.
You can write a directive and accomplish exactly what you want, but I think a better way to do things is to create a div(without conditions - since every open div element has to have a closing element) and to add dynamic content inside using ng-if:
<div>
<div ng-if="cond1"></div>
<div ng-if="cond2"></div>
<!-- ETC...... -->
</div>
The simplest and best way to do this by using "ng-if" attribute for any HTML element that you want to render on the basis of some condition that you can manupulate in your controller as per your need.
For example:
<div ng-if = "expression">
</div>
This expression should be evaluate to be boolean i.e. either true or false, here you can specify multiple condition also which should be evaluate to true or false.
For multiple condition example check out this fiddle:
http://jsfiddle.net/9Ymvt/820/
Check out this example in example section of "ngif doc":
https://docs.angularjs.org/api/ng/directive/ngIf
I have a conditional ng-include directive with a ng-controller associated, but it seems the controller isn't run when the condition is true.
The target is to include the template only when the condition is met and avoid the TypeError: Cannot call method 'insertBefore' of null issue.
For example:
<div ng-include src="myContent.imgList ? 'ui/image-list.html' : null" ng-controller="ImgListSubCtrl">
</div>
When myContent.imgList is filled with data, I expect the image-list.html template to be appended to the DOM and ImgListSubCtrl to be run, but it isn't.
Is this the expected behavior?. I'm using Ionic Framework with Angular 1.2.17.
Thank you.
I already found an explanation, though further comments are welcome.
The following Codepen shows the mentioned behavior and the solution (in Ionic Framework 1.0.0-beta12): http://codepen.io/anon/pen/FnojD?editors=101
The first include doesn't display any count, though the second one displays it correctly.
It seems that when using ng-include along with ng-controller, the controller is only run once, even when the ng-include src expression evaluates to null.
To run it when the template is actually included (when ng-include src isn't null), a solution is to avoid the conditional ng-include and wrap it in a ng-if block, so the whole element is re-created dynamically, as shown in the Codepen above.
In the example from the question:
<div ng-if="myContent.imgList">
<div ng-include src="'ui/image-list.html'" ng-controller="ImgListSubCtrl">
</div>
</div>
I hope it helps.
I have the following
<div ng-if="false"> nothing here </div>
Shouldn't the div's content be hidden?
I want to make this slightly more complex like :
<div ng-if="user.id == 1">
The name is: {{user.name}}
</div>
but none of the above work.
The aim is if the ng-if expression is true to run the code inside the div. Is the ngIf the correct expression or is there a better boolean/expression handler?
ng-if directive is introduced in AngularJS v1.1.5, so you must be using some older version of Angular.
Here is a plunker: http://plnkr.co/edit/gvDUsLrTSS54jCJMDS89?p=preview
Everything just works fine.
Stewie is right you are using probably the stable 1.0.8 version of angular.