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 !
Related
If anyone can help, I'd be very thankful. I am pretty new to AngularJS and trying to learn it. The problem I got is that one of controllers are not called when button Bought is pressed
<div class="col-md-6" ng-controller="AlreadyBoughtController as Items">
<h2>Already Bought:</h2>
<ul ng-repeat="bought in Items.ItemsBought track by $index">
<li>Bought {{bought.quantity}} {{bought.name}}</li>
</ul>
<div class="emptyMessage" ng-if="Items.ItemsBought.length === 0">Nothing bought yet.</div>
</div>.
Please look complete code with app.js file on plunker:
http://plnkr.co/edit/8wKY7PPZ6mINsFGCJQfP?p=preview
That's because you were never actually passing the index of the item you bought.
<li>Buy {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="itemsToBuy.boughtItems($index);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
Pass $index to your function: ng-click="itemsToBuy.boughtItems($index);
Take a look at the fixed plunk.
My Code is given below . Please check and reply .
Thanks
<div ng-repeat="(x, y) in items">
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
</div>
I tested your code and everything works fine when I removed the spaces in data-tooltip attribute.
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
----------------------------------------------------------------------^^^^
Did you initialize the tooltip before your content has been loaded? If so, you should initialize it after the render of items data. Otherwise there will be no .tooltiped DOM to be initialized.
We've got the following HTML:
<div class="btn-group search-dropdown" dropdown is-open="gender.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{sex_temp=='F'?'Female':'Male'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-class="{'dropdown-selected':sex_temp=='F'}">
<a ng-click="sex_temp='F'">Female</a>
</li>
<li ng-class="{'dropdown-selected':sex_temp=='M'}">
<a ng-click="sex_temp='M'">Male</a>
</li>
</ul>
</div>
In the console, we're getting the following error:
Error: setIsOpen is not a function #http://127.0.0.1/lib/bootstrap-ui/ui-bootstrap-tpls-0.12.1.js:1734:5
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12406:23
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1 #debugger eval code:1:1
consoleLog/<#http://127.0.0.1/lib/AngularJS/angular.js:10062:18
$ExceptionHandlerProvider/this.$get</<#http://127.0.0.1/lib/AngularJS/angular.js:7363:7
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12426:19
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1
We're using ui-bootstrap-tpls-0.12.1.js
I have tried adding $scope.gender={isopen:false} but that didn't help.
Any idea on what might be the problem here? The dropdown is working perfectly. I just want to get rid of these errors in the console.
I had the same issue, I believe it has something to do with the overlap of bootstrap's drop-down. Try removing the "dropdown-toggle" class from your button.
In my case it helped to simply remove the is-open attribute.
This is 2 years later, but updating your ui-bootstrap would fix this problem if you're using an older version (example 0.13 instead of 2.5)
<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>
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>