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.
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'm using uib-collapse, and it works great! I just wish that I could control that I don't have more than one open div, and it seems that accordion is the way to go.
However, I found it terribly hard to apply styles on uib-accordion.
Is there a way to apply the same effect using only uib-collapse?
Yes you can, just manage the collapsed state with an array. Keep in mind the uib-collapse attribute controls whether the element is collapsed. So you markup would look like:
<button type="button" class="btn btn-default" ng-click="collapseToggle(0)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[0]">
<div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(1)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[1]">
<div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(2)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[2]">
<div class="well well-lg">Some content</div>
</div>
And the controller bits:
$scope.isCollapsed = [];
$scope.collapseToggle = function(id) {
// if toggeling the same collapse
// just close it.
if ($scope.isCollapsed[id]) {
$scope.isCollapsed.length = 0;
return;
}
$scope.isCollapsed.length = 0;
$scope.isCollapsed[id] = true;
}
Here is a plunk demonstrating this approach.
I have a table in Angular that gets list of names. I want to be able to delete a name when the user click on the button in front of the name. However, before that, I want to show a modal and ask the user to confirm that.
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in vm.entity | filter:vm.filter track by c.Id">
<td>
<span>{{c.Name}}</span>
</td>
<td>
<button class="glyphicon glyphicon-trash" type="button" data-toggle="modal" data-target=".bs-example-modal-sm"></button>
</td>
</tr>
</tbody>
</table>
I am using Bootstap modal and here is what I have.
<div class="modal fade bs-example-modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The problem is since the buttons in the modal are not in the loop I can't pass in the correct object into the vm.remove method to delete the item.
Does anyone know how to deal with this issue?
Ok Guys,
Thanks for all your help.
I have managed to fix it by moving the modal right next to the button so the modal is repeated as well as the button as #Dabbiemiller suggested and then I assign a ID for each modal that matches the id of each element, and I assign the data-target= "modal{{c.id}}" and it works :)
Also I have changed to becase the fade class was causing an issue as well.
<button class="glyphicon glyphicon-trash" ng-show="vm.isAdmin == 'True'" type="button" data-toggle="modal" data-target="#modal{{c.id}}"></button>
<div class="modal" id="modal{{c.id}}">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have a functional angular-strap aside with a custom template.
In my template are anchor tags. When you click one of these tags, it closes the aside.
How can I prevent the aside from closing?
Thanks!
Here is my template:
<script type="text/ng-template" id="chart-edit-aside">
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title" ng-bind="title"></h4>
</div>
<div class="aside-body">
<div ng-repeat="chart in availablecharts">
<a ng-click="loadChartPreview(chart);" href>{{chart.metric_label}}</a>
</div>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-primary-mp" ng-click="saveChart()">Save</button>
<button type="button" class="btn btn-secondary-mp" ng-click="$hide()">Cancel</button>
</div>
</div>
</div>
</div>
Turns out my function call on the click event was causing it, when I commented out the body of that func, the aside did not close. So this is not an issue with aside.
I have a simple directive using button groups from Bootstrap. I'm using transclude so I can add in more buttons for certainly layouts. This all works like a champ, but I need to remove the transclude div so that it doesn't mess up the button group layout.
So the directive renders out this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<div ng-transclude="">
<button class="btn btn-danger"Delete</button>
</div>
</div>
What I want is this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<button class="btn btn-danger">Delete</button>
</div>
I found this article but It's a bit outdated and references deprecated functions in compile. Can someone point me in the right direction?