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.
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.
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 !
So I have some HTML that I do not control.
<div id="myDiv">
Stuff inside my div...
</div>
I want to add an ngClick to it. If I could control the html, I would just do this
<div id="myDiv" ng-click="doSomething()">
Stuff inside my div...
</div>
But like I said, I can't change the html. If this was jQuery, I would just do
$('#myDiv').click(function(){
doSomething();
});
How do I do this in Angularjs? Thanks.
UPDATE
Judging from the downvotes, it seems like you guys are not happy with what I am trying to do here, so let me explain.
I am using AngularUI in my app. AngularUI has all these templates that they insert. For example
<accordion-heading></accordion-heading>
becomes
<div class="panel-heading">
<h4 class="panel-title">
<a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span class="ng-binding ng-scope">Heading</span>
</a>
</h4>
</div>
I want to add ngClick to "panel-title". I COULD overwrite the template and add it, but I don't want to do that. Coming from jQuery, it makes sense to just listen to a click event on "panel-title". How it is done Angular? Thanks.
You need to find the element, smth like: angular.element(//selector here); then add attribute you need(ng-click), .attr('ng-click', '//whatever should be here'), and then compile it with angular $compile.
But. I feel sad that you have to do this, I hope you'll find a possibility to change html.
Docs for compile
I'm trying to remove an element inside ngRepeat. It's removing well, but after the element is removed, the page is reloaded. How can I prevent this reload action?
Heres the code:
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button ng-click="remove($index)">Click me</button>
</li>
js scope:
$scope.remove = function($index){
$scope.tasks.splice($index, 1);
}
As per the W3C spec, the type is undefined and it's assuming a submit. Adding type='button' should resolve the issue for you.
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button type="button" ng-click="remove($index)">Click me</button>
</li>
Relevant specification if you're curious.
<button> was acting like a submit (thanks to #Antiga), I tried to change it to input[type=button] but still didn't work.
I just made this change:
<button ng-click="remove($index)">Click me</button>
to:
<a ng-click="remove($index)">Click me</a>
And it worked well.
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>