I have a bootstrap dropdown with checkboxes. I want to use this in Angular.
http://codepen.io/bseth99/pen/fboKH (i dont use any of the javascript in there and I wrap the dropdown in a form)
<form>
<div class="container" ng-controller="HomepageController">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</li>
<li><input type="checkbox"/> Option 3</li>
</ul>
</div>
</div>
</div>
</div>
</form>
Inside HomepageController:
$scope.callMe = function (event){
event.preventDefault();
return false;
}
I notice that whenever I click on an option or anywhere in the checkbox, it redirects and refreshes the page to go to /#. I tried putting an ng-click on the "a" tag such that it calls a function in a controller that has "return false", no luck. Page still redirects. How do I prevent the page from redirecting and output the "option" that is checked?
The issue is......
I want the checking of a box to trigger an event.
Checkboxes don't appear to actually check when I click on the checkbox.
Want to make sure I can check multiple boxes without the dropdown closing itself after clicking on any individual option.
Use
<a href="javascript:void(0)" ....>
it's essentially a no-op and will cause no navigation.
Related
I am managing an angular ng-show event on a button click to show a div element in the DOM. How can I reset the to hide the div if user clicks anywhere else in the DOM other than on the button.
I am currently using angular ver- 1.5.8. Help is highly appreciated.
<div class="panel-wrapper collapse in">
<div class="panel-body">
<a class="btn btn-success btn-outline m-t-10 collapseble" style="margin:1px" ng-repeat="author in authorsData" ng-click="showRoles(author.id, author.contribution_role)">{{author.name}}</a>
</div>
<div class="m-t-15" ng-show="roles.length > 0">
<button class="btn btn-outline btn-info btn-xs waves-effect" style="margin:1px" ng-repeat="role in roles">{{role}}</button>
</div>
</div>
You can use ng-blur directive for this.
Example:
<div >
<input type="button" value="Click" ng-click="set=true" ng-blur="set=false"/>
</div>
<div ng-show='set==true'>
Clicked
</div>
Hope you are able to manage ng-show events using this code.
I got a wrapper that stops event propagation because of other things happening in and with that wrapper. In that wrapper I got several directives with UI Bootstrap dropdowns.
The problem is, that these dropdowns doesn't close on any click. Only by clicking another dropdown.
It seems that UI Bootstrap Dropdown watches click on body or something to close all dropdowns.
<div class="wrapper" ng-click="$event.stopPropagation()" style="width: 100%; height: 300px; background:grey;">
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
https://plnkr.co/edit/bHHrpipM4MlxLNfOE2pt?p=preview
Any ideas to solve this?
Thanks for your help!
According to source code the event handler for closing of dropdown element is getting attached to window.document element:
$document.on('click', closeDropdown);
but at the same time $event.stopPropagation() method prevents click event from being executed.
If you want dropdown to trigger events in this scenario then you could bind click event to dropdown that basically triggers document element click event:
$scope.dropDownClick = function($event) {
angular.element(document).triggerHandler('click');
};
Dropdown element
<ul class="dropdown-menu" ng-click="dropDownClick($event)" uib-dropdown-menu role="menu" aria-labelledby="split-button">
...
</ul>
Forked plunker
A workaround you could use is shown at this working plnkr.
You need to stop wrapper's propagation and use a variable to toggle dropdown's is-open attribute.
Right now my button is repeating because I am using ng-repeat to repeat the 2 versions buttons in my page, how can make just this button not repeat? that button needs to be together with the other ones, I know I can put this button out and will not repeat, but I need hide this button and make just appear when version buttons appear too.
everything is fine, just that button is repeating, is someway to use ng-repeat="none" or something similar?
Thanks.
html:
<div>
<div class="item"
ng-repeat="version in versions"
ng-class="{active: version.isActive}"
ng-class="{active: }">
<a ng-click="setDiffed(version)"
ng-class="{active: version.isDiffActive}"
name="compare-type"><i></i>
</a>
<h4 ng-click="setMaster(version)">{{ version.label }}</h4>
</div>
<button type="button" class="btn btn-primary">
back to home
</button>
</div>
You can put this button out and show it only if there are any versions.
Simplified HTML:
<div ng-repeat="version in versions">
<button>
{{version}}
</button>
</div>
<button ng-show="versions.length > 0">
back to home
</button>
See how it works: http://jsfiddle.net/qd4j6964/
Try using ng-show or ng-if, somthing like:
<div>
<div class="item"
ng-repeat="version in versions"
ng-class="{active: version.isActive}"
ng-class="{active: }">
<a ng-show = "Your condition for showing or not" ng-click="setDiffed(version)"
ng-class="{active: version.isDiffActive}"
name="compare-type"><i></i>
</a>
<h4 ng-click="setMaster(version)">{{ version.label }}</h4>
</div>
<button type="button" ng-show = "Your condition for showing or not" class="btn btn-primary">
back to home
</button>
</div>
AngularJS Documentation - ng-show .
I am pretty new to AngularJs. I have to toggle a section and used the ng-click like below:
<div class="panel panel-secondary scroll" href="#feedList-os" class="collapsedOs" ng-model="collapsedOs" ng-click="collapsedOs=!collapsedOs">
<ul id="feedList-app" class="list-group" ng-show="collapsedOs">
<li class="list-group-item clearfix">
<div class="panel panel-container scroll">
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Details</button>
</div>
</li>
</ul>
</div>
This is working fine as expected, but I have a button inside the div with class panel panel-container scroll has a button. I do not want the toggle logic to be applied for clicking the button. Even if I override the ng-click on the button, that's not overriding the default functionality.
If you add ng-click on the inner button, you can pass in an event object $event.
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal" ng-click='doWork($event)'>Details</button>
In the handler code you can do prevent bubble through for this event.
$scope.doWork($event) {
$event.stopPropagation
}
We have a list of items derived from ng-repeat, each item is clickable with ng-click.
These items may contain form elements and or ui.bootstrap.dropdown elements
On iPad safari and chrome, tapping on the dropdown does not open the menu and the input box does not open the the keyboard, although, sometimes briefly.
Anyone encounter this before?
A narrowed down example would look like this
<div ng-repeat="item in model.items" ng-click="selectItem(item)">
<input type="text" />
<div class="btn-group">
<button class="btn btn-default dropdown-toggle ">{{item.something}}</span></button>
<button class="btn btn-default dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="sub in item.subs">
{{sub.name}}
</li>
</ul>
</div>
</div>
Thank-you
Turns out it was for all mobile devices and found some bits of information here and there such as the explanation by jbielick here https://github.com/angular/angular.js/issues/6432
Used the directive presented by jdhiro on this page https://github.com/angular-ui/bootstrap/issues/2017 and seems to work well so far.
example:
<input type="text" stop-event="touchend"/>