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.
Related
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 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 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?