New to Angular and struggling with how to do things the "Angular Way". All I want to do is click a button to show a hidden element inside a view then hide the button that was clicked. Any help would be awesome.
HTML:
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
Show Div
</button>
<div ng-show="showDiv">
I was hidden now you see me, but how do I hide the button?
</div>
Controller:
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
Code sample: Plunker
Ideally would like to incorporate ng-hide on the button and not have a function run inside of the controller.
<button ng-hide="showDiv"...
Should work also
Just add ng-show="!showDiv" to your button, this will hide it if showDiv = true
Just to be clear new html should look:
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>
Related
Goal: I would like to call a bootstrap modal from a bootstrap popover. I was looking at Calling a modal from a Bootstrap popover and tried to implement the code.
Issue: Upon clicking the button that triggers the modal from inside the popover, it will darken the background but no modal appears. Not sure what the issue is exactly. The code I tried from the linked article above gives the same result as if I just set up the button to trigger a modal without the suggest jQuery in that article.. Currently my code is set up to use the advice suggested there, and this is what I have so far...
Thanks in advance to all help.
$(function () {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#messageUser", function() {
console.log('Clicked message button');
$('#messageUserModal').modal('show');
});
});
/* --Tried this too, thinking the popover and modal were fighting
$(function() {
$('#messageUser').click(function() {
console.log('Clicked message button');
//$('[data-toggle="popover"]').hide();
$('#messageUserModal').modal('show');
//$('#messageUserModal').show();
});
});
*/
HTML/PHP/BS
<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button>
</form>
<div class='modal fade' id='messageUserModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<h4 class='modal-title' id='myModalLabel'>Send Message to ".$helperName." </h4>
</div>
<div class='modal-body'>
<textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Send Message</button>
</div>
</div>
</div>
</div>
I found the answer to the problem.. I thought that I should try to call the modal from outside of the popover (i.e. a button somewhere on the page to press to call that modal, just to see if the problem was isolated to the popover as I had originally concluded..). Once I added the same button elsewhere I got nothing to happen. I then realized that the code for the modal was in the popover so I then took that code put it outside of the popover. When I then clicked on the new button I saw that a modal came up as expected, but then I clicked on the original button that I was trying to call the modal with and it then also triggered the modal.. so that told me that when the popover is fired it must be executing the modal but never showing it or something to that extent.. so I will remove the code for the modal outside of the popover code and it will work just fine. Long winded answer but hopefully the journey to get to the answer will help someone else as well.
Also, important to note, if using bootstrap 3 you do not need to write any fancy jquery code to show the modal, or whatever the suggestion was from the article I referenced at the beginning of the post..
I'm using the Inspinia theme.
An example page
If you click the fa-chevron icon in the upper right of each ibox, it collapses the ibox.
I want to collapse all the iboxes with a collapse all button. And then expand them all with an expand all button.
The buttons look like:
<button type="button" data-action="expand-all" class="btn btn-white btn-sm">Expand All</button>
<button type="button" data-action="collapse-all" class="btn btn-white btn-sm">Collapse All</button>
I want clicking "Collapse All", to, in-effect, click all of the minimize panel buttons.
How?
I'm not sure what version you are using, but for the AngularJS implementation in directives.js you can see the function iboxTools that handles this. If you just want to use jQuery to manually do it it's as simple as:
//slide up (or down) all ibox content
$('div.ibox-content').slideUp();
//change the chevron
$('.ibox-tools a.collapse-link i').toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
How can i have a dismissible popover that should hide when clicking on button also?
Right now only when clicking outside popover will close.But i want it to close when clicking on that button also.
<button popover-template="dynamicPopover.templateUrl" data-toggle="popover"
popover-title="{{dynamicPopover.title}}" popover-trigger="focus" class="btn btn-default" popover-placement="bottom" popover-elem>Popover With Template</button>
This is the link plnkr.co/edit/ioN7D5OQyRF7KMYw36l0?p=preview
Just remove
popover-trigger="focus"
here is an updated plunkr.
hope it helps.
I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.
Here is a sample code from twitter bootstrap but . . .
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.
From bootstrap doc :
Manually hides a modal.
.modal('hide')
$('.modal').modal('hide')
So if you want to hide it on click you can bind this action to the click event
$('#yourid').on('click' , function() {
$('.modal').modal('hide')
});
if you want to hide it after some second that you loaded the document you can try with a timeout
$(function(){ //document ready
..
.. //your code
..
setTimeout(function(){
$('.modal').modal('hide')
}, 2000); //2000 = 2 second
..
})
UPDATE 1
To bind it on the close button give him a class or id
Close
now
$('.closebtn').on('click',function() {
$('.modal').modal('hide');
});
If you want to bind only on that close button use an id instead of a class
Old post but this can now be done using HTML attributes.
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
try this
$('.modal').modal('hide');
I had the same problem. If it's still needed you can try to put your 'click' event in another event 'shown.bs.dropdown' like so:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#yourid').on('click' , function() {
$('#myDropdown').modal('hide');
});
});
In my case the 'click' event wasn't binded when the modal was shown. So when I put it in 'show.bs.dropdown' event, everything went as I expected. 'click' was binded to modal as soon as modal was shown.