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 .
Related
I am upgrading bootstrap from 4 to 5. I found that data-toggle="dropdown" needs to be changed to data-bs-toggle="dropdown".
My problem is after I did the upgrade one of my dropdown boxes shows up on the left side of screen under the button which shows up on the right side of the screen. They are both in a div tag that should be right aligning and putting them on the right column of two columns. Can someone help me figure out how to keep the drop down from escaping the div tag. Note: When I resize the page the dropdown box goes where it should be.
<div id="pagetitle" class="row">
<div class="col-md-6">
<span class="page-title">Claims</span>
</div>
<div class="col-md-6">
<div class="pull-right">
<button id="dropdownCreateNew" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
Here is a picture of how how the drop downs look.
https://i.stack.imgur.com/fthDP.png
After playing around I found that when I added an additional div tag after pull-right, that the group stayed together. Don't know why, but it worked.
<div class="col-md-6">
<div class="pull-right">
<div>
<button id="dropdownCreateNew" type="button" role="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew" role="menu">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
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.
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
}
I'm trying to add buttons to my inline form using ng-repeat directive.
It is working but buttons lose spacing between them when using ng-repeat.
If I remove ng-repeat and just add exactly identical html for buttons myself then spacing between buttons is ok.
Here is jsfiddle.
If is very strange as resulting html is absolutely identical.
Let's take a look at the rendered HTML...
First the non-angular:
<div class="form-inline">
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
</div>
And now the Angular:
<div class="form-inline ng-scope" ng-controller="MyCtrl">
<!-- ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">123</span>
</button>
</div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">456</span>
</button>
</div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">789</span>
</button>
</div><!-- end ngRepeat: button in buttons -->
</div>
See the difference? There are line breaks and code alignment spaces between the button-wrapper divs in the hand-typed HTML, but none in the HTML rendered by the ng-repeat. Those line breaks and spaces are visually rendered as a single space between each div. This can be demonstrated by removing the line breaks between the divs on the hand-typed HTML. I believe the intention of bootstrap is to render without space between buttons unless explicitly defined.
This other question addresses how to eliminate the spaces
I see the example in fiddle but if you remove the div line get the same alination.
however I was having many problems with the Bootstrap styles in ng-repeat in my case the solution was put the style="display: inline-block;" in the div with the ng-repeat directive
<div class="button-wrapper" ng-repeat="button in buttons" style="display: inline-block;">
<button type="button" class="btn btn-default">
<span>{{button}}</span>
</button>
</div>
Thanks to #Lathejockey81 answer I finally realized a valid solution.
After each button except last we need to insert an empty div with display: inline-block. This div must be last tag inside the ng-repeated tag.
<div class="form-inline" ng-controller="MyCtrl">
<div class="button-wrapper" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span>{{button}}</span>
</button>
<div ng-show="!$last" style="display: inline-block;"></div>
</div>
</div>
Updated working fiddle.
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>