I am new to angular js and bootstrap. I have a requirement that i need to implement a popover on hover or click and the user should be able to edit the tooltip. Could you suggest an approach to implement it.
Hover over me
I am open to any other approach also.
Check the angular-ui-bootstrap - project, specifically the popover directive:
https://angular-ui.github.io/bootstrap/#/popover
You will need to add the angular-ui-bootstrap scripts to index.html, along with the regular bootstrap css - there is a CDN for this:
https://cdnjs.com/libraries/angular-ui-bootstrap#
After adding the above 2 scripts (min or unminified) and the bootstrap.css file to index.html - you must add angular-ui-bootstrap to your apps bootstrap process like:
angular.module('myModule', ['ui.bootstrap']);
At that point you are ready to use the popover - for instance on mousenter:
<button uib-popover="This popover appeared on mouse enter!"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Hover Over</button>
You can obviously make this dynamic - per your requirements - just like the examples in the docs:
<div class="form-group" ng-controller="MyController as vm">
<label>Popup Text:</label>
<input type="text"
ng-model="vm.popoverContent"
class="form-control"/>
<button uib-popover="{{vm.popoverContent}}"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Dynamic Hover Over</button>
</div>
Related
I tried to open ui-sref in new tab, noted that i don't want to call it from controller. How to do from view end?
<div class="col-md-12 text-right wow fadeInUp">
<!-- submit button -->
<button ui-sref="app.blogs" target="_blank" class="btn btn-black " id="form-submit" type="submit" value="Submit">See all Blogs</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
</div>
If you want to open a ui-sref from the view you can use target="_blank", but note that the button element does not support target. Change your button into an anchor tag.
<a ui-sref="app.blogs" target="_blank">See all blogs</a>
If you want to continue to use the button element, I believe you need to use the controller.
adding logic to view is not a good practice, however,
you can add some function to your controller and use it in your view(in view you don't have access to WINDOW/DOCUMENT or any other variable/function which is not part of scope)
or you can use HTML tags same as #Zahid Rahman answer(like target="_blank")
but I really recommend you to use a controller for UI logic and services for general logics and API calls or sharing data between controllers
uib-Popover unexpectedly closes with popover-template, "outsideClick" trigger and a uib-Datepicker in it: in fact, the popover unexpectedly closes when clicking on the datepicker itself.
Here the button opening the popover:
<div style="text-align:center;">
<button uib-popover-template="'myPopoverTemplate.html'" popover-title="Popover title" type="button" class="btn btn-default" popover-trigger="outsideClick" popover-placement="bottom" >Open me</button>
</div>
and the popover template:
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<uib-datepicker ng-model="dateTime" class="well well-sm"></uib-datepicker>
</div>
{{dateTime | date}}
</script>
full code in plnkr: http://embed.plnkr.co/ESto8dgDbh52g0nl7g03/
Is this a bug of angular bootstrap or i am missing something? i already opened an issue on angular bootstrap github, you can follow it here:
https://github.com/angular-ui/bootstrap/issues/5979
I found this is already been aswered on github.
Below i will share the answer from wesleycho, one of the main contributors of angular bootstrap:
You have to manually stop the click event propagation.
More pratically, you need to add a
ng-click="$event.stopPropagation()"
on the parent element of the uib-datepicker.
A quick example of this solution can be found here (provided by wesleycho itself).
Using Bootstrap, Angular and ui-bootstrap I'm creating a bunch of radio buttons which look like normal buttons (working plunker here).
I now want to make the active button blue (.btn-primary) and the rest white (btn-default). I found some SO-answers which explain how to conditionally apply a class here. I tried implementing this technique like so (Plunker here):
<div class="btn-group">
<label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
Unfortunately it doesn't seem to work. Does anybody know how I can achieve the active button to be a btn-primary and the other ones being a btn-default? All tips are welcome!
You are missing quotes around css classes btn-primary and btn-default. You need quotes because there is a dash in the property of the object.
See edited plunker
I have a web application built using Knockout.js but the one thing I have failed to implement is proper reusable HTML. Right now even if I have a view such as a dialog which is shared by multiple other views I have to copy and paste the HTML code and nest it in the parent in order to achieve proper binding communication between the child and parent.
Here's an example:
<div class="person-view"> <!-- PersonViewModel -->
<div class="person-details">
<!-- Person details -->
</div>
<button type="button" data-bind="click: EditAddress">Edit address</button>
<div class="modal hide fade" role="dialog" data-bind="modal: ShowEditAddressModal, with: Address"> <!-- AddressViewModel -->
<div class="modal-header">
<h3>Edit address</h3>
</div>
<div class="modal-body">
<!-- Address details -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" data-dismiss="modal" data-bind="click: function() { $parent.SetAddress($data); }">Save</button>
</div>
</div>
</div>
In this case I have a sub-ViewModel which I am setting as the DataContext for the modal div. When the user clicks the Save button I am calling a method on the parent DataContext.
I know how to break the modal out to a separate HTML template and to generate the template dynamically supplying the ViewModel. That would work for showing and hiding the modal because I would simply need to do the following from within the code of the parent:
this.Address().IsShown(true);
In this case the modal would simply bind its visibility to a property on itself and the parent just needs to change it. That's fine.
However, what about when I click the Save button? I do not see how to have the parent respond to this occurrence using the MVVM pattern of Knockout.js. The button would still need a click binding which would bind to arbitrary code on the AddressViewModel, but how would it signal an event to its parent using Knockout?
Is there no way of doing this with Knockout and do I need to implement a separate library such as Underscore.js for events?
This is not a direct answer to your question, but the problem you're trying to solve is eliminated by using a library like DurandalJS which is built on top of knockout and handles view composition. There are a lot of features that Durandal provides to enable the kind of code reuse you're looking for, without having to reinvent the wheel. It's not the right fit for every project, but it might fit your needs.
I'm developing Joomla 2.5 site with template based on Twitter Bootstrap v2.1.1.
I'm also using BootstrapX - clickover, a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus: https://github.com/lecar-red/bootstrapx-clickover.
In popover I'm calling a HTML file with simple AJAX currency converter.
This is HTML which triggers popover with currency converter:
<a class="pretvornik withajaxpopover" href="#" rel="clickover" title="Pretvornik valut" data-load="http://www.cheaperandmore.com/files/static_converter.html">Click here</a>
This is content of the HTML file (http://www.cheaperandmore.com/files/static_converter.html):
<p>V okence vpišite znesek v britanskih funtih, ki ga želite preračunati v eure.</p>
<div id="currencyBox">
<div class="currencyInner">
<div class="data">
<input type="text" name="znesek" id="znesek" value="1" /><span id="gbpsign">£</span>
</div>
<div class="data">
<select name="fromCurrency" id="fromCurrency">
<option selected="" value="GBP">GBP</option>
</select>
</div>
<div class="data">
<select name="toCurrency" id="toCurrency">
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div style="currencyInner" id="calcresults"></div>
<div class="clr"> </div>
<div class="data">
<input class="btn btn-primary" type="button" name="convert" id="convert" value="Pretvori »" />
<button class="btn" class="clickover" data-toggle='button' data-dismiss="clickover">Zapri</button>
</div>
</div>
This is javascript:
<script type="text/javascript">
//Add close button to bootstrap popovers
$('[rel="clickover"]').clickover();
//Load data
$('.withajaxpopover').bind('click',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.unbind('click').popover({content: d}).popover('show');
});
});
</script>
Right now when I click on a link which triggers popover, two popovers appear.
One popover has content from static_converter.html, but it's missing clickover class "popover fade right in".
Other popover, which is hidden behind first one has correct class "popover clickover fade right in", but it has no content except title which is taken from a.pretvornik.withajaxpower title tag.
So when I click close button in the first popover it actually closes second popover (because it has clickover class).
I can't figure out what I'm I doing wrong.
You can see it here: http://www.cheaperandmore.com (click on the "£ » €" in the first semicircle in the top left part of the page).
Any help would be appreciated.
It appears the plugin is inheriting from the Twitter Bootstrap popover plugin : it means you don't need to call .clickover() if you call .popover() (or rather the opposite).
You should try that
<script type="text/javascript">
//Load data and bind clickover
$('.withajaxpopover').on('click.ajaxload',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.off('click.ajaxload').clickover({content: d}).clickover('show');
});
});
</script>
I took the liberty of changing bind and unbind to on and off because it's preferred since 1.7.
I also added an event name click.ajaxload to avoid conflict, but you should look into .one() because it does the unbinding for you.
If you have clickovers that don't have the ajax loading part, you should make two separate selectors and enable the clickover plugin differently on each.
You can for example remove the rel="clickover" attribute on the .withajaxpopover elements, and keep both $('[rel="clickover"]').clickover(); and the code above.