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
Related
I have some HTML that is conditionalized with the ng-if tag.
<div ng-if="localVideoExists">
<video id="videoPlayer" controls src='{{localVideoSrc}}' style="max-height: 400px;" />
</div>
At no time does the condition in the ng-if directive evaluate as true. I would think that this means the inner HTML would never be added to the DOM. However, my web server logs show many requests in the form
/{{localVideoSrc}}
So, something is causing the video tag to pop into existence (although I never find it in the DOM) and it is creating a web request based on the not-yet-evaluated Angular template string {{localVideoSrc}}. I cannot seem to prevent this behavior. In fact, the first line in my controller is:
$scope.localVideoExists = false;
I've also disabled any functionality for now, that would ever set localVideoExists to true.
Any insight would be appreciated!
The reason of that is that Angular loads after the DOM has loaded. So the HTML is parsed and executed before Angular is activated. So, the browser loads the HTML inside the ng-if body and makes a request for the {{localVideoSrc}}.
To prevent this kind of behavior, use ng-src: https://docs.angularjs.org/api/ng/directive/ngSrc
Probably, you also need to use the $sce service because of security.
Use ng-src instead src
<div ng-if="localVideoExists">
<video id="videoPlayer" controls ng-src='{{localVideoSrc}}' style="max-height: 400px;" />
</div>
please see more here https://docs.angularjs.org/api/ng/directive/ngSrc
I have an ng-if div as follows:
<div ng-if="colorSelected" ng-cloak>
<h6>My Color</h6>
</div>
When colorSelected is true, the inner header element never shows up. Am I doing something wrong?
Use ng-show instead of ng-if.
ng-if creates it's own scope so any scope variables you use inside of an ng-if will be related to a different scope. For example...
<div ng-if='selectedColors'>
{{iAmDefinedInAController}}
</div>
The variable 'iAmDefinedInAController' will be empty even if it is defined in the controller because a new scope is created inside the ng-if.
ng-show does not do this, so just use that and you will be good to go.
it should word.
Probably your modal 'colorSelected' is not binded.
use "ng-if = true" and see if it works
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.
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.