How can I do the ng-include conditionally in angularJS?
For example I only want to include something if, the variable x is set to true.
<div ng-include="/partial.html"></div>
If you are using Angular v1.1.5 or later, you can also use ng-if:
<div ng-if="x" ng-include="'/partial.html'"></div>
If you have any older version:
Use ng-switch:
<div ng-switch on="x">
<div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>
Fiddle
You could also do
<div ng-include="getInclude()"></div>
In your controller
$scope.getInclude = function(){
if(x){
return "partial.html";
}
return "";
}
A little bit more readable version of one of the answers. Plus setting ng-include to null removes the element - just like ng-if.
<div ng-include="x ? 'true-partial.html' : null"></div>
If the condition is simple enough, you could also put the conditional logic directly in the ng-include expression:
<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>
Note the expression x is not in single quotes and therefore evaluated. See http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA for more details.
I encountered a similar issue and may be this finding can help someone. I have to display different partials on click of link but ng-if and ng-switch both were not working in this scenario(Below code was not working).
<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>
<section class="col-md-8 left-col">
<span ng-if = "LIST">
<div data-ng-include="'./app/view/articles/listarticle.html'">
</span>
<span ng-if = "EDIT">
<div data-ng-include="'./app/view/articles/editorarticle.html'">
</span>
</section>
So what I did is, instead of using ng-if, On click of link just update the value of partialArticleUrl (which is a model in controller) and declare below code on html.
<section class="col-md-8 left-col">
<div data-ng-include="partialArticleUrl">
</section>
Related
I am slowly advancing into angular. At this point I have form with several steps, each step is made of ng-form, since each step contains "continue" button and common headers I have following loop
<section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
<h1 class="header">{{$index + 1}}. {{step.title}}</h1>
<div class="content">
<ng-include src="step.template"></ng-include>
</div>
<!--and button code-->
<div class="content-body" ng-show="currentSection == $index">
<button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>
<button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
<div style="clear: both;"> </div>
</div>
</section>
So in that way I am not repeating same buttons code for each ng-form.
Before that I was using only ng-include and sections were hard coded, I suppose I am missing $scope now, as ng-include creates one as well as ng-repeat, could someone advise me on how can I make Continue button dependant on each ng-form validation result? (How can I access each individual ng-form results in topmost $scope?)
Each button has access to that form's $error, so you could have this for example:
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">
You also have ng-form spelled incorrectly (ng-from), although I assume that was an artifact from you pasting/typing in.
If you want to disable button if one of the forms is invalid
How can I access each individual ng-form results in topmost $scope?
You can wrap ng-repeat in ng-form and top ng-form will be invalid if any child form in ng-repeat is invalid.
Or if you wan't to block button per form then
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>
I have a list of questions to display.
I would like to add a question mark icon next to the question whenever it has a description.
<ul class="list-group" data-toggle="items" ng-repeat="ques in questions">
<li class="list-group-item"><input type="checkbox" /> {{ques.question}}
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
</li>
</ul>
So I add all the question and when it has a description I would like to add an icon.
The code above is not working so if you can help !
Thx
ng-if="ques.description"
without the curly brackets, should do it, with a recent version of angular.js (>1.1)
For more information, please check the ng-if official documentation
However, if you are using an older version of angular.js, you cannot use the ng-if directive. It would explain why your glyphicon is always displayed, regardless of the ng-if condition.
If it is the case, here is a workaround:
<div ng-switch="ques.description==null">
<i ng-switch-when="false" class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
Try change line:
<div ng-if="{{ques.description}}">
to:
<div ng-if="ques.description">
Replace this part :
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
with :
<span ng-if="ques.description">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</span>
Fiddle
1st thing remeber ng-if="expression" never works with interpolation directive {{}} it will need an expression, It would be great if you check length.
And for better binding with title attribute use ng-attr-title, it will create title attribute when {{ques.description}} get parsed.
<div ng-if="ques.description.length > 0">
<i class="glyphicon glyphicon-question-sign" ng-attr-title="{{ques.description}}"></i>
</div>
The solution is in the comments below my post.
The probleme was that I was on a 1.0.x version of angularJS which did not have the ng-if directive.
I downloaded a new angular.js and now it works !
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
{{data.company_name}}
</h1>
</div>
What I'd like to do is make it so that if data.company_name hasn't been added through an input field, it shows a placeholder "Company name", how can that be done using angularjs?
You can use ng-if and do something like
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
<span ng-if="data.company_name === ''">
// Some placeholder
</span>
<span ng-if="data.company_name !== ''">
{{data.company_name}}
</span>
</h1>
</div>
BTW ngIf is a new directive added in v1.1.5 so you might need to upgrade your angular version
See my plunker here : http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP
One way to keep the code clean is to use a filter. This piece of code adds a class to an active tab.
var filters = angular.module('filters');
filters.filter('ie', function(){
return function(v, yes, no){
return v ? yes : no;
};
});
Template
<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
Home
</li>
For Using ng-if, ng-else-if, and ng-else in your project use this:
https://github.com/zachsnow/ng-elif
You can use ng-if condition for the check company name vlaue. Let's take example of
<span ng-if="driver.status_flag == 1">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
In above example I have added condition status_flag value is 1 then the inside span value will show. Same way with your case you can add statement like
<span ng-if="data.company_name === ''">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
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>