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"/>
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.
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 have this part of code :
http://jsfiddle.net/Lt7aP/1015/
What I`m trying to do is when user click on that input or on button next to it I want to expand list but problem is that i cant get list below that input. Any suggestion?
<div class="input-group-btn">
<button type="button" data-toggle="dropdown">
<input class="input-sm-custom bg-light-black white bold fs15" readonly="readonly" style="border:1px solid #1d1d1d;width: 100%;font-weight: bold;" data-ng-model="selectedItem" ng-model-options="{ debounce: 500 }">
</button>
<button type="button" class="bg-light-black dropdown-toggle input-sm-custom mr2 fs14 bt-light-black" data-toggle="dropdown"><span class="carret-arrow white "></span></button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng-repeat="item in OddsRepresentations">
<li class="pointer padding2 fs15" ng-model="selectedItem" >{{item}}</li>
</ul>
</div>
It work like this:
<div class="select-wrapper">
<select class="form-control" data-ng-model="selectedItem" data-ng-options="item as item for item in OddsRepresentations" data-ng-change="changeOddsRepresentation()"></select>
</div>
But i want to make my own dropdown to be same at all browser
I have made few changes in your code to have a working dropdown. First of all I've set a boolean to show or not the list.
This is done by adding ng-click="isOpen = !isOpen" in your button. And then your ul will be like this :
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng->
<li class="pointer padding2 fs15" ng-if="isOpen" ng-repeat="item in OddsRepresentation" >
<span ng-click="select(item);" ng-bind="item"></span></li>
</ul>
Notice, that there is also an ng-click on your li, it's for save you value and then print it on your input.
Working Fiddle
I am trying to Disable the Bootstrap dropdown by setting data-toggle="" which is not working .The ul has lis ng-repeating on one array and if that array is empty i am setting data-toggle="" to not open the empty li.But this is not working it is still opening an empty list as given below.
Here is the template. you can see at <button> that the data-toggle is empty not dropdown.Still it opens the list.
<div name="originFilter" id="originFilter" class="dropdown pa-leftFilter-dropdown-div open">
<button id="selectBrand" class=" btn btn-default dropdown-toggle" type="button" disabledropdown="" disable="brands" data-toggle="" aria-expanded="true">
<span id="selectedBrand" class="pa-text-wrapper-ellipsis pa-filter-selected-span ng-binding" ng-attr-title="{{selectedProperties.brand}}" title="LISTERMINT">BEBE</span><span class="caret"></span>
</button>
<ul class="dropdown-menu pa-filter-dropdown" role="menu" aria-labelledby="OriginDropDown">
<!-- ngRepeat: brand in brands -->
</ul>
</div>
Use ng-disabled true/false for making dropdown enable/disable
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.