<button ng-href="#!/edit/{{a.id}}"
type="button"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</button>
Nothing happens when I click on the button. But It goes to the link I want if I use
<a ng-href="#!/edit/{{a.id}}> Edit </a>
How can I use a button for this routing? Thanks
The issue is that <button> elements don't support the href attribute.
What you can try instead is to style your <a> element to look like a button using Bootstrap's classes.
<a ng-href="#!/edit/{{a.id}}"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</a>
Related
I am using knockout and I am trying to hide or display two buttons based on the a value of a boolean that I have named server but I am not quite getting it right. Below is the code that I have come up with so far please assist I think there is something missing in my syntax
<!-- ko if: server -->
<a class="btn btn-small" data-bind="css: { 'device-action-on': status(), 'device-action-off': !status() }, click: $root.deviceMetricsVM.toggleSensorState">
<i class="fa fa-power-off"></i> </a>
<a class="btn btn-small" data-bind="css: { 'device-action-on': mode(), 'device-action-off': !mode() }, click: $root.deviceMetricsVM.toggleHomeMode">
<i class="fa fa-home"></i>
</a>
<!-- /ko-->
<!-- ko ifnot: server -->
<a class="btn btn-small" data-bind="css: { 'device-action-on': status(), 'device-action-off': !status() }, click: $root.deviceMetricsVM.toggleSensorState" style="display:none;">
<i class="fa fa-power-off"></i>
</a>
<a class="btn btn-small" data-bind="css: { 'device-action-on': mode(), 'device-action-off': !mode() }, click: $root.deviceMetricsVM.toggleHomeMode" style="display:none;">
<i class="fa fa-home"></i>
</a>
<!-- /ko-->
I would display the value of server to the UI to make sure it's the value you think it is. It might be that "server" is out of scope for that particular HTML.
Put this at the top of the HTML and see what happens.
<span>Server value: </span>
<span data-bind="text: server"></span>
Make sure to check your browser JavaScript console output for clues and errors.
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
There are 2 div tags, i want to display only 1 based on value of SelectedVariant.InCart.
Code is as follows:
<div ng-if="1==0">
<a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div ng-if="1==1">
<a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-info disabled">{{3+2}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
But it displaying both the div elements. Can someone help me what is the issue?
your angular version is 1.0.7. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version and that will solve your problem. :)
I need to use a dropup menu.
This code worked perfectly with ui-bootstrap-tpls-0.10.0.js:
<div class="btn-group dropup">
<button type="button" class="btn btn-default" ng-click="print('PDF')">{{text}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="print('PDF')">Pdf</a></li>
<li><a ng-click="print('EXCEL')">Excel</a></li>
</ul>
</div>
After upgrading to ui-bootstrap-tpls-0.11.0.js, the dropup popup doesn't show anymore. Any help appreciated. The dropdown still works as expected.
Add the dropdown attribute to your outer div:
<div class="btn-group dropup" dropdown>
I use Bootstrap v2.2.2
And this is my button:
<div class="pagination ">
<ul>
<li>
<a href="" class="btn btn-success btn-large">
<i class="icon-fast-forward"></i>
</a>
</li>
</ul>
</div>
However, when I try to focus on button I get strange behavior of colors:
Demo in Fiddle
The fix is to remove pagination class or <ul> tag
How can I fix it?
Thank you,
(**comment: I'm not interesting to use bootstrap 3.0)
Changing the tag from anchor to button, it solves your display issue. I updated your fiddle
<button class="btn btn-success"> <i class="icon-fast-forward"></i> </button>