Add a dropdown toggle only if a condition is fullfiled - javascript

There is a list of elements created by this:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down"></i></span>
</td>
I want that if rows.values has a value greater than 0 to have a dropdown toggle.
My try so far looks like:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>
<ul ng-class="rows.values ? dropdown-toggle: ''" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
but it doesn't do anything.
LATER EDIT:
After the suggestions received my code looks like:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>
<ul ng-class="{'dropdown-toggle': rows.values}" role="toggle">
<li>Action</li>
<li>Another action</li>
</ul>
but still does not do anything.
Any suggestions?

You forgot to add single quotes for values:
<ul ng-class="rows.values ? 'dropdown-menu' : ''" role="menu">
<!--------------------------^-------------^
Or the other way to do is:
<ul ng-class="{'dropdown-menu': rows.values}" role="menu">

try this.. Use as an expression
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown"></i></span>
</td>
<ul class="dropdown-menu {{rows.values>0?'':'ele-show'}}">
<li>Action</li>
<li>Another action</li>
</ul>
and give a custom style as
.ele-show{
display:none;
}

Related

How to enable/disable dropdown with angular2?

Hope it is not a duplicate question. I have some layout which is as follows,
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
How to enable dropdown on button click with angular?
To enable/disable
<div class="btn-group">
<button [attr.disabled]="dropdownDisabled ? true : null"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
<button (click)="dropdownDisabled = !dropdownDisabled">toggle</button>
to open/close
i assume that you're using bootstrap css style
<div class="btn-group dropdown" [class.open]="dropdownOpened">
<button (click)="dropdownOpened = !dropdownOpened"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
[attr.aria-expanded]="dropdownOpened ? 'true': 'false' ">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>

Bootstrap dropdown list button doesn't work

When click on bootstrap button a list should be opened, but it doesn't respond on the click.
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
code:
http://jsfiddle.net/Fanadka/r0sfvrcz/
Any idea?
Firstly, you have to include jQuery in your fiddle.
Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this
<div class="btn-group dropdown">
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
FIDDLE

Angular ui-bootstrap: dropdown not working with version 0.13.3

I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that.
Here's a common plunker.
But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?
To fix this, you have to use the directive dropdown, not only the class.
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-cogs"></i> Hi !
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.
Working Plunker
As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
to
<ul class="nav navbar-nav navbar-right">
<li dropdown>
</i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
did the trick.

Dropdown menu in table cell

I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>

Showing DropDown list in twitter bootstrap doesn't work correctly

I have a two drop down list using twitter bootstrap, but I have a small problem .. when choosing the menu , the sub items appears , bu then in the next time don't .
Html code :
<ul class="nav nav-pills left">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" style="color:#fff;" data-toggle="dropdown" href="#menu1"><i class="icon icon-user icon-white">
</i> My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Previouse Report</li>
<li>My Profile</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="lbtnLogout" runat="server" CausesValidation="false" ForeColor="Black">Log out</asp:LinkButton></li>
</ul>
</li>
<li class="dropdown active" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"><span class="badge-notification badge badge-error">
<asp:Label ID="lblMsgCount" CssClass="lblMsgCount" runat="server" Text=".."></asp:Label></span>
<i class="icon icon-envelope icon-white">
</i> Notificatons <span class="caret"></span></a>
<ul ID="divNewNotifications" class="dropdown-menu">
</ul>
</li>
</ul>
JavaScript code :
$('.dropdown-toggle').dropdown();
and included the required lib.
<script src="../bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
Here is the code on http://jsfiddle.net/zNVgq/2/

Categories